ing=(url){
{
:url,
:true,
:{
:'/json',
'X--With':''
},
:(,req){
if(req.==='POST'&&req.body){
=.(req.body)
.write()
// parse /json
app.use(.json())
// parse /x-www-form-
app.use(.({:false}))
// proxy
.((item){
app.use(item.url,proxy((item.)))
})
// eg: :3000//oppor => :8352//oppor
通过以上的配置我们就能轻松将指定url下的请求自动转发到匹配成功的目标接口下。
= node ./bin/dev-.js
: true [HPM] Proxy : / -> :8351 [HPM] Proxy : / -> :8352 at 192.168.1.104:3000
built in Hash: : 1.14.0 Time:
二、将配置和node 进程打通
1、解耦中的配置
由于在开发和生产环境中经常需要做各种配置的切换，官方也提供了来进行环境参数设置，但是大量的判断语句侵入.中其实会导致代码的可读性和复用性变差project server，也容易造成代码冗余，我们在此可以对配置文件进行重构，将之前的配置文件拆解成了..js，..js和..js三个文件，三个文件各司其职，又可互相协作，减少维护成本，如下：
> ├── ..js ├── ..js └── ..js
..js中的关键实现：
// Here is where you can based on the .
// a key to the the that you wish to , and
// the base will apply your .
.={
// ======================================================
// when === ''
// ======================================================
:()=>({
:`http://${.}:${.}/`
}),
// ======================================================
// when === ''
// ======================================================
:()=>({
:'/apps/',
:'//',
ning:false,
:'',
:false,
:{
:true,
:true,
:true
})
..js中的关键实现：
// ..js
={
env:.env.||'',
// ----------------------------------
//
// ----------------------------------
:path.(,'..'),
:'src',
:'dist',
:'',
:'',
:'tests',
// ----------------------------------
//
// ----------------------------------
:ip.(),// use '' to on local
:.env.PORT||3000,
// ----------------------------------
//
// ----------------------------------
:'-map',
:'hash',
ning:false,
:false,
:'/',
:{
:false,
:false,
:true
};
// 在此通过读取环境变量读取中对应的配置项，对前面的配置项进行覆盖
=('./.')
=[.env]
if(){
debug('Found , to .')
.(,())
}else{
debug('No found, will be used.')
.=
..js中的关键实现：
=('')
=('./.')
=('debug')('app::')
=('--')
=..
=..
={
name:'',
:'web',
:,
:{
:[.paths.(),''],
:['.web.js','.js','.jsx','.json']
},
:{}
if(){
debug(' for live (HMR, ).')
..push(
.()
}(){
debug(' for ().')
..push(
..n(),
..(),
lugin({
:os.cpus().,
:true,
:{
:false,
:true,
:true
})
由此可知，三者间的注入关系如下：
> -> ->
2、整合在开发环境中依赖的中间件
参考-dev-中的实现，我们可以将-dev-和-hot-加入到我们的配置中，
npm -dev-
npm -hot-
具体配置如下：
=('')
=('debug')('app:')
=('')
=('..//.')
=('..//.')
=()
// ------------------------------------
// Apply HMR
// ------------------------------------
if(.env===''){
=()
debug(' dev and HMR ')
app.use(('-dev-')(,{
:..,
:.paths.(),
hot :true,
quiet :,
:,
lazy:false,
stats :
}))
//
app.use(('-hot-')(,{
path:'/'
}))
// proxy
.......
.=app.(.,(err){
if(err){
.log(err)
=.+':'+.
.log(' at '+uri+'n')
});
这样当我们执行下述的时候，就能一键完成基础配置，热更新以及服务的启动，并且可以完全根据的配置说明来自定义扩展我们的前端开发资源。
ENV= node ./bin/dev-.js
三、前端资源路径设计
实际开发中，所有涉及到的前端资源我们进行归类一般会有如下几种：
.={
entry:path.join(,"src","entry.js"),
:{
/*
-dev-环境下，path、、---base 区别与联系
path：指定编译目录而已（/build/js/），不能用于html中的js引用。
：虚拟目录project server，自动指向path编译目录（// => /build/js/）。html中引用js文件时，必须引用此虚拟路径（但实际上引用的是内存中的文件，既不是/build/js/也不是//）。
---base：必须指向应用根目录（即index.html所在目录），与上面两个配置项毫无关联。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
发布至生产环境：
1.进行编译（当然是编译到/build/js/）
2.把编译目录（/build/js/）下的文件，全部复制到//目录下（注意：不是去修改index.html中引用.js的路径）
*/
path:path.join(,"build","js"),
:"//",
//: "",//你也可以加上完整的url，效果与上面一致（不需要修改index.html中引用.js的路径，但发布生产环境时，需要使用插件才能批量修改引用地址为cdn地址）。
:'.js'
};
有了如上的概念，我们就可以将path，和中的配置结合起来，同时由于在开发环境中我们的资源入口通常又会按特定的目录来进行文件存放，如下图所示：
>
├── ├── .md ├── app.json ├── dist ├── bin ├── ├── .json ├── ..js ├── ├── ├── src └── yarn.lock
从中不难发现node 中需要配置的资源目录往往会和的工程目录重叠，那么我们就需要在中进行相应的配置，才能实现资源的正确索引。
1、html模板资源读取
html作为中的，在中则会变成views，读取方式会发生变化，所以我们需要对资源进行如下配置：
npm ejs #让支持html模板格式
=('ejs')
=()
// view , 默认可以指向dist
app.set('views',.paths.dist())
app.('.html',ejs.)
app.set('view ','html')
// 通过配置让读取的内存打包资源下的文件
app.use('/home',(req,res,next){
=path.join(.,'index.html'')
..(, (err, ) => {
if (err) {
next(err)
res.set('-type', 'text/html')
res.send()
res.end()
})
})
//让所有的路由请求都落到index.html中，再有前端框架中的前端路由接管页面的跳转
app.use('*', (req, res, next) {
const = path.join(., 'index.html')
..(, (err, ) => {
if (err) {
next(err)
res.set('-type', 'text/html')
res.send()
res.end()
})
/*也可以指定到特定的views文件下进行模板资源读取*/
res.('home.html', {
name:'home.html'
})
})
2、js和css资源读取 js和css的引用地址在的开发环境中通常会指向，所以在开发页面中会直接如下嵌入如下地址，由于是采用绝对地址指向，所以无需做任何配置：
限时特惠:本站持续每日更新海量各大内部创业课程，一年会员仅需要98元，全站资源免费下载
点击查看详情
站长微信:Jiucxh
