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。
!image

$3

``js
/ IFTRUE_yourFlagName ...js code... FITRUE_yourFlagName /
``

- Mode 2 -- head and foot
In this mode, you can use eslint to check your code.
``js
/ IFDEBUG /
var anyJsHere = 'Any js here'
/FIDEBUG /
``

``js
/ IFTRUE_yourFlagName/
function anyJsHere(){
}
/FITRUE_yourFlagName /
``

----


$3

Compiled output by options: {isDebug: false, forAlibaba: false}:
``js
$state.go('win', {dir: menu.winId})
``
----

$3

``js
const conditionalCompiler = {
loader: 'js-conditional-compile-loader',
options: {
isDebug: process.env.NODE_ENV === 'development', // optional, this expression is default
envTest: process.env.ENV_CONFIG === 'test', // any prop name you want, used for / IFTRUE_evnTest ...js code... FITRUE_evnTest /
myFlag: process.env.npm_config_myflag, // enabled by npm run build --myflag
}
}

module.exports = {
// others...
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader', conditionalCompiler],
},
{
test: /\.js$/,
include: [resolve('src'), resolve('test')],
use: [
//step-2
'babel-loader?cacheDirectory',
//step-1
conditionalCompiler,
],
},
// others...
]
}
}
``


$3

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:
``js
var options = {
changeSource: process.env.npm_config_java ? source => source.replace(/\.aspx\b/i, '.do') : null
}
``


- \[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!


/*IFDEBUG
let tsFunc = function(arr: number[]) : string {
alert('Hi~');
return arr.length.toString()
}
FIDEBUG*/
``

* 2:
``scss
/ IFTRUE_myFlag /
div > ul > li {
a {
color: red;
}
}
/FITRUE_myFlag /


h2{
background: red;
/* IFTRUE_myFlag
color: blue;
FITRUE_myFlag */
}
``


* 3
`js
Vue.component('debugInfo', {
template: ''
/* IFDEBUG
+ '

{{JSON.stringify($attrs.info || "", null, 4).replace(/"(\\w+)":/g, "$1:")}}

* 4
`vue



            {{$attrs.info || ''}}
        



``