yn-js-conditional-compile-loader

• English
• 插件介绍

一个条件编译的webpack loader, 支持按条件构建各种代码文件，如js、ts、vue、css、scss、html等。
条件编译，是指 用同一套代码和同样的编译构建过程，根据设置的条件，选择性地编译指定的代码，从而输出不同程序的过程。

• 比如：用一套代码实现debug和release环境输出两套不同js程序，debug时直接输出各种数据信息编译开发调试，release时完全不包含这些代码。
  • 又如：用一套代码和构建过程针对不同客户编写不同的定制代码，发布时通过不同的命令发布不同的程序：如npm run build --ali发布针对ali的程序，npm run build --tencent发布针对tencent的程序。

用法

插件提供了IFDEBUG和IFTRUE两个条件编译指令。用法是：在js代码的任意地方以/*IFDEBUG或/*IFTRUE_xxx开头，以FIDEBUG*/或FITRUE_xxx*/结尾，中间是被包裹的js代码。xxx是在webpack中指定的options条件属性名，比如myFlag。 html和 vue template 捏需要使用 html的注释方式：<!-- IFDEBUG或<!-- IFTRUE_xxx开头，以FIDEBUG -->或FITRUE_xxx -->结尾

• 模式1 - 全注释:
  因为采用了js注释的形式，故即使不使用js-conditional-compile-loader，也不影响js代码的运行逻辑。

1    /*IFDEBUG Any js here FIDEBUG*/

1/* IFTRUE_yourFlagName ...js code... FITRUE_yourFlagName */

• 模式2（首+尾）：
  这种模式下，可使用eslint校验你的代码。

1<!-- IFDEBUG -->
2var anyJsHere = 'Any js here'
3<!-- FIDEBUG -->

1/* IFDEBUG */
2var anyJsHere = 'Any js here'
3/*FIDEBUG */

1/* IFTRUE_yourFlagName*/ 
2function anyJsHere(){
3}
4/*FITRUE_yourFlagName */

---

由源码输出的结果

源码：

1/* IFTRUE_forAlibaba */
2var aliCode = require('./ali/alibaba-business.js')
3aliCode.doSomething()
4/* FITRUE_forAlibaba */
5
6$state.go('win', {dir: menu.winId /*IFDEBUG , reload: true FIDEBUG*/})

当options为{isDebug: true, forAlibaba: true}时，构建后输出的内容:

1var aliCode = require('./ali/alibaba-business.js')
2aliCode.doSomething()
3
4$state.go('win', {dir: menu.winId, reload: true })

当options为{isDebug: false, forAlibaba: false}时，构建后输出的内容:

1$state.go('win', {dir: menu.winId})

---

安装

1    npm i -D js-conditional-compile-loader

webpack配置

这样修改webpack配置:
查看样例： vue-element-ui-scaffold-webpack4 js-conditional-compile-loader需要作为处理源文件的第一步，即放在use数组的末尾。
如下例子为vue、js文件的配置，ts文件的配置类似。css、scss等样式的配置略复杂，可参考这个样例

1const conditionalCompiler = {
2    loader: 'js-conditional-compile-loader',
3    options: {
4        isDebug: process.env.NODE_ENV === 'development', // optional, this expression is default
5        envTest: process.env.ENV_CONFIG === 'test', // any prop name you want, used for /* IFTRUE_evnTest ...js code... FITRUE_evnTest */
6        myFlag: process.env.npm_config_myflag, // enabled when running command: `npm run build --myflag`
7    }
8}
9
10module.exports = {
11    // others...
12    module: {
13        rules: [
14            {
15                test: /\.vue$/,
16                use: ['vue-loader', conditionalCompiler],
17            },
18            {
19                test: /\.js$/,
20                include: [resolve('src'), resolve('test')],
21                use: [
22                    //step-2
23                    'babel-loader?cacheDirectory',
24                    //step-1
25                    conditionalCompiler,
26                ],
27            },
28            // others...
29        ]
30    }
31}

options 配置

• isDebug: boolean

如果isDebug === false，则所有/\*IFDEBUG 和 FIDEBUG\*/之间的代码都会被移除。 其他情况，这些代码则会被保留。

isDebug默认取值为：process.env.NODE_ENV === 'development'

• 任意属性名：boolean

如果 [属性值] === false，则所有/\* IFTRUE_属性名 和 FITRUE_属性名 \*/之间的代码都会被移除。 其他情况，这些代码则会被保留。

用法举例 -- 任意源码，任意位置！

条件编译指令可以用在任意源代码文件的任意位置，不受代码语法限制。
例如：

• 1

1const tx = "This is app /* IFTRUE_Ali of debug FITRUE_Ali */ here";
2
3
4/*IFDEBUG
5let tsFunc = function(arr: number[]) : string {
6    alert('Hi~');
7    return arr.length.toString()
8}
9FIDEBUG*/

• 2:

1/* IFTRUE_myFlag */
2div > ul > li {
3    a {
4        color: red;
5    }
6}
7/*FITRUE_myFlag */
8
9
10h2{
11    background: red;
12    /* IFTRUE_myFlag 
13    color: blue;
14    FITRUE_myFlag */
15}

• 3

1Vue.component('debugInfo', {
2    template: ''
3    /* IFDEBUG
4        + '<pre style="font-size:13px;font-family:\'Courier\',\'Courier New\';z-index:9999;line-height: 1.1;position: fixed;top:0;right:0; pointer-events: none">{{JSON.stringify($attrs.info || "", null, 4).replace(/"(\\w+)":/g, "$1:")}}</pre>'
5    FIDEBUG */
6    ,
7    watch: {
8      /* IFTRUE_myFlag */
9      curRule (v){
10          this.ruleData = v
11      },
12      /*FITRUE_myFlag */
13    },
14});

• 4 从1.0.19之后，template内，禁止再用以下 /* 方式，因为本地开发serve时，会有空行的问题。lint会报空行的错误。template 需要用 这种注释方式

1<temeplate>
2    <div>
3        <!-- IFTRUE_myFlag -->
4        <h2>This is a test! For HTML. vue模板内也可以使用！</h2>
5        <pre>
6            {{$attrs.info || ''}}
7        </pre>
8        <!-- FITRUE_myFlag -->
9    </div>
10</temeplate>
11
12<script>
13    var vueComponent = {
14        data: {
15            /* IFTRUE_myFlag
16            falgData: 'Flag Data',
17            FITRUE_myFlag */
18        },
19    };
20</script>
21
22/* IFTRUE_myFlag*/
23<style scoped>
24    .any-where-test {
25        color: red;
26    }
27</style>
28/* FITRUE_myFlag*/
29
30
31<style id="a" scoped>
32    /* IFTRUE_myFlag*/
33    .test-for-css {
34        color: red;
35    }
36    /*FITRUE_myFlag */
37</style>