在做开发时,为了调试js代码,通常需要加载没有压缩的js文件,而在正式发布时,为了减小文件大小,往往要对文件进行压缩。
另外,测试和发布所使用的数据库,redis,solr都可能不一样,所以为了方便地对两种环境进行随意切换,做好配置就很重要了。
下面介绍一种我想到的方法,虽然不是特别的完美,但也可作为参考。
数据源切换
首先在根目录下写一个config.js文件,定义一个模块:
module.exports = {
mode:'debug',
debug:{//开发环境配置
sql: {
sqlServer: 'aaaaaaaaa',
sqlDatabase: 'da',
sqlUser: 'sa',
sqlPwd: 'aaaaaaa',
}
},
release:{//生产环境配置
sql: {
sqlServer: 'bbbbbbbbb',
sqlDatabase: 'db',
sqlUser: 'sb',
sqlPwd: 'bbbbbbbbb',
}
}
};
在具体使用时,利用mode变量来选择开发环境或是生产环境:
var config = require('../config');
var user = config[config.mode].sql.sqlUser,
在开发时把mode设为'debug',发布时改为'release'。当然,你可能会忘记改就发布出去了,那么你最好准备一个config_temp.js文件,在发布前用自动构建工具把config_mode变量替换成release,再生成config.js文件。
module.exports = {
mode:'${config_mode}',
debug:{//开发环境配置
sql: {
sqlServer: 'aaaaaaaaa',
sqlDatabase: 'da',
sqlUser: 'sa',
sqlPwd: 'aaaaaaa'
}
},
release:{//生产环境配置
sql: {
sqlServer: 'bbbbbbbbb',
sqlDatabase: 'db',
sqlUser: 'sb',
sqlPwd: 'bbbbbbbbb'
}
}
};
这样做似乎时不太优雅的,所以仅供参考。
后来我发现一个更好的方法。原文地址
具体做法如下:在根目录下命名一个config文件夹,分别为开发环境和生产环境写配置。
//development.js
module.exports = {
sql: {
sqlServer: 'aaaaaaaaa',
sqlDatabase: 'da',
sqlUser: 'sa',
sqlPwd: 'aaaaaaa'
}
};
//production.js
module.exports = {
sql: {
sqlServer: 'bbbbbbbbb',
sqlDatabase: 'db',
sqlUser: 'sb',
sqlPwd: 'bbbbbbbbb'
}
};
再写一个模块用以判断环境,从而选择适合的配置;
var path = require('path');
// 通过NODE_ENV来设置环境变量,如果没有指定则默认为生产环境
var env = process.env.NODE_ENV || 'production';
env = env.toLowerCase();
// 载入配置文件
var file = path.resolve(__dirname, env);
try {
module.exports = require(file);
} catch (err) {
throw err;
}
然后,你可以在桌面编写development.bat和production.bat两个脚本文件
//development.bat
set NODE_ENV=development
npm start
//production.bat
set NODE_ENV=production
npm start
如此一来,当你想切换环境时,只要双击运行就行了。发布时,因为没有设置NODE_ENV,会默认使用生产环境,不用担心忘记改。
浏览器环境
在浏览器环境主要是js压缩文件和非压缩文件的切换。我看过利用构建工具和模块加载工具实现的,不过看起来有点复杂。
我的方法还是使用ejs模版。
将每个页面共用的css和js分离出来,做一个文件,以头部css文件为例。使用ejs模版
<%if(pageName=='index'){%>
<link rel="stylesheet" type="text/css" href="/common/css/lib/amazeui-index<%if(pageMode!='debug'){%>.min<%}%>.css" />
<%}else{%>
<link rel="stylesheet" type="text/css" href="/common/css/lib/amazeui<%if(pageMode!='debug'){%>.min<%}%>.css" />
<%}%>
<link rel="stylesheet" type="text/css" href="/common/css/util<%if(pageMode!='debug'){%>.min<%}%>.css"/>
<link rel="stylesheet" type="text/css" href="/MaiMai/dist/css/<%=pageName%><%if(pageMode!='debug'){%>.min<%}%>.css" />
这里利用一个传到页面的pageMode参数来控制,如果pageMode为debug,返回非压缩文件,否则返回压缩文件。
这个pageMode是从哪里来的呢?
我将router独立出来一个模块,给router加一个中间件
var express = require('express');
var router = express.Router();
router.use(function(req,res,next){
if(!req.query.pageMode||req.query&&req.query.pageMode!='debug'){
req.query.pageMode='release';
next();
}else{
next();
}
});
module.exports=router;
如果不传参数,给query加一个默认参数pageMode='release'(尽管它从头到尾都没用到)。每次请求前,都会先运行这个中间件,然后把这个参数传下去。
当然,在渲染页面时,需要把这个参数传给页面:
router.get('/list', function(req, res) {
res.render('List', {
pageMode:req.query.pageMode
});
});
});
你可以像平常一样在浏览器输入地址,这时将下载压缩资源
搜狗截图17年02月20日2245_2.png
但如果你想在浏览器中调试,只要在后面加上一个pageMode=debug,加载的就是非压缩的资源了。
搜狗截图17年02月20日2245_3.png
css如此,js也一样处理。当然,这种方法也有不好的地方,每个页面生成时都要加入这个变量,未免繁琐。
网友评论