javascript下条件编译的实现(基于webpack的js-conditional-compile-loader插件)

条件编译,是指 用同一套代码和同样的编译构建过程,根据设置的条件,选择性地编译指定的代码,从而输出不同程序的过程。一般用在C++、Java、C#这样的编译执行语言。对于javascript,我们也可以使用基于webpackjs-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即可激活为truenpm run build --ali
实际项目中可以按照你的需要尽情发挥。

示例项目

这里是个完整项目的例子,可供参考。

你可能感兴趣的:(compile,webpack,es6,javascript,条件编译)