条件编译,是指 用同一套代码和同样的编译构建过程,根据设置的条件,选择性地编译指定的代码,从而输出不同程序的过程。一般用在C++、Java、C#这样的编译执行语言。对于javascript,我们也可以使用基于webpack
的js-conditional-compile-loader
插件实现类似的条件编译功能。
应用场景举例
我们经常会遇到类似这样的需求:
- 代码需要根据运行环境,运行不同的代码。比如,测试环境可以控制台输出一些信息,生产环境则不提示;同时又不希望输出的代码中存在判断环境的if-else代码使程序包体积增大。
- 项目交付给多个客户使用,而某些客户会有一些定制模块。这些定制模块只给特定用户使用,不希望也一起打包在不相干客户的程序包中,但也不希望给定制客户单独维护一个特殊项目而增加维护成本。
- 前端为了调试,引用了很多mock数据。但是生产环境打包时也包含了这些mock数据和mock插件,增大了代码包体积。希望生产环境程序包完全不含这些(即使是异步按需加载也不要)。
使用条件编译的方法,可以优雅地解决这样的问题,同时代码维护方便,发布的程序包中也不会有多余的代码存在。
插件原理
js-conditional-compile-loader插件是一个webpack的loader插件,它会在webpack处理js代码之前,将js代码根据设置的条件进行修改,去掉当前条件下不需要的代码,保留需要的代码,从而实现条件编译的功能。
使用步骤
可参考这里的中文文档。
1. 安装
npm i -D js-conditional-compile-loader
2. 配置webpack
在rules中为js文件添加loader,作为第一步处理js文件,并配置编译条件。
module: {
rules: [
{
test: /\.js$/,
include: [resolve('src'), resolve('test')],
use: [
//step-2
'babel-loader?cacheDirectory',
//step-1
{
loader: 'js-conditional-compile-loader',
options: {
isDebug: process.env.NODE_ENV === 'development', // optional, this is default
myFlag: process.env.npm_config_ali, // any name, used for /* IFTRUE_myFlag ...js code... FITRUE_myFlag */
}
},
]
},
//other rules
]
}
3. 项目代码中使用
插件支持IFDEBUG和IFTRUE两个条件编译指令。用法是:在js代码的任意地方以/*IFDEBUG
或/*IFTRUE_xxx
开头,以FIDEBUG*/
或FITRUE_xxx*/
结尾,中间是被包裹的js代码。xxx是在webpack中指定的条件属性名,如上面的myFlag。
举个例子,
源码:
我们用这样的源代码:
/* IFTRUE_forAlibaba */
var aliCode = require('./ali/alibaba-business.js')
aliCode.doSomething()
/* FITRUE_forAlibaba */
$state.go('win', {dir: menu.winId /*IFDEBUG , reload: true FIDEBUG*/})
条件1输出
当webpack中插件的options配置为{isDebug: true, forAlibaba: true}
时,构建后输出的内容:
var aliCode = require('./ali/alibaba-business.js')
aliCode.doSomething()
$state.go('win', {dir: menu.winId, reload: true })
条件2输出
当webpack中插件的options配置为{isDebug: false, forAlibaba: false}
时,构建后输出的内容为:
$state.go('win', {dir: menu.winId})
如此便实现了条件编译。结合命令参数关联到环境变量,可以用命令参数指定不同的编译条件。例如本文中的配置条件:myFlag: process.env.npm_config_ali
,执行命令时带上--ali
即可激活为true
:npm run build --ali
。
实际项目中可以按照你的需要尽情发挥。
示例项目
这里是个完整项目的例子,可供参考。