nuxt-conditional-compile-loader

lib for Nuxt2, base on js-conditional-compile-loader lib

Support ELSE grammer

/* IFTRUE_xxx 

*/ ELSE /*

FITRUE_xxx */

• 中文文档
• Introduction

A conditional compiling loader for webpack, support any source files like js, ts, vue, css, scss, html.
Conditional compiling means that we can use the same codes and compiling process, to build different applications with different environment conditions.

• For example: we can output two different program for debug or release environment with a same source code project.
• Another sample: Use same codes and compiling process to supply different customers, just by using different building command args, like this: npm run build --ali for alibaba, npm run build --tencent for tencent。

Usage

This loader provides two directives: IFDEBUG and IFTRUE. Just use them anywhere in js code like this: Start with /*IFDEBUG or /*IFTRUE_xxx, end with FIDEBUG*/ or FITRUE_xxx*/, place js code in the center. The xxx is any condition property of the options in webpack, such like myFlag.

• Mode 1 - comment all
  Since it is designed by a js comment style, the code can run normaly even though the js-conditional-compile-loader is not used.

1/* IFDEBUG Any js here FIDEBUG */

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

• Mode 2 -- head and foot
  In this mode, you can use eslint to check your code.

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

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

---

Build result with source code

Source code:

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

Compiled output by options: {isDebug: true, forAlibaba: true}:

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

Compiled output by options: {isDebug: false, forAlibaba: false}:

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

---

Setup

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

Config in webpack

Change webpack config like this:
See this sample: vue-element-ui-scaffold-webpack4(https://github.com/hzsrc/vue-element-ui-scaffold-webpack4)
js-conditional-compile-loader needs to be added as step 1 for a rule, means it is set as the last item of the use array.
This sample is a config for vue and js files, ts file is alike. For config of css、scss, See this sample

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 by `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

If isDebug === false, all the codes between /\*IFDEBUG and FIDEBUG\*/ will be removed, otherwise the codes will be remained.
Defualt value of isDebug is set by: process.env.NODE_ENV === 'development'

• changeSource: Function(source, options)

Custom function to change source code. Optional. Sample: change .aspx to .do for java backend:

1var options = {
2    changeSource: process.env.npm_config_java ? source => source.replace(/\.aspx\b/i, '.do') : null
3}

• [any propertyName]：{bool} if [propertyValue] === false, all codes between /\* IFTRUE_propertyName and FITRUE_propertyName \*/ will be removed, otherwise the codes will be remained.

Samples -- Any file, Anywhere!

Conditional compiling directives can be used anywhere in any source files.
Like these:

• 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<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>