[toc]
### js的条件编译
+ 安装
```
npm i -D js-conditional-compile-loader
```
+ 配置webpack
webpack.base.conf.js文件中在rules配置编译条件如下
```
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
isHK: process.env.npm_config_hk, // any name, used for /* IFTRUE_isHK ...js code... FITRUE_isHK */
}
},
]
},
//other rules
]
}
```
+ 项目中使用
插件支持IFDEBUG和IFTRUE两个条件编译指令。用法是：在js代码的任意地方以/*IFDEBUG或/*IFTRUE_xxx开头，以FIDEBUG*/或FITRUE_xxx*/结尾，中间是被包裹的js代码。xxx是在webpack中指定的条件属性名，如上面的isHK。
在项目代码中设置如下
```
{ name: '用户部门', value: 'usrDepartId' },
/* IFTRUE_isHK */
{ name: '舱门管理', value: 'id' },
/* FITRUE_isHK */
{ name: '手机号', value: 'telphone' },
```
+ 编译执行
在终端输入**npm run dev –hk**
可以看到舱门管理
在终端输入**npm run dev**
可以看到舱门管理被隐藏
### 样式的条件编译
问题来了，样式的条件编译我想用以下两个方式实现，都遇到了问题，请大神指点：
对vue接触时间较短，框架底层不了解,不知道怎么进行设置，在线等
#### 1. 类似js条件编译，在webpack中进行配置
进行如下设置后，样式的条件编译无法实现
```
{
test: /\.(css|html|vue)(\?.*)?$/,
// loader: 'style-loader!css-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
use: [
//step-2
'babel-loader?cacheDirectory',
//step-1
{
loader: 'css-loader',
options: {
isDebug: process.env.NODE_ENV === 'development', // optional, this is default
envTest: process.env.ENV_CONFIG === 'test',
isHK: process.env.npm_config_hk,
isNT: process.env.npm_config_nt, // any name, used for /* IFTRUE_ntFlag ...js code... FITRUE_ntFlag */ npm run build-demo --nt
}
},
]
},
```
#### 2. 设置全局变量，通过条件渲染以实现不同效果
比如设置全局变量 *versionType为1或2*
执行 **npm run dev --hk** 时versionType为1
执行 **npm run dev --nt** 时versionType为2
问题来了，在终端执行**npm run dev –hk**时，在哪设置全局变量versionType=1（执行不同分支代码，实现1hk、2nt）
以下代码为全局变量，需要在哪设置：
```
/* IFTRUE_isHK */
Var versionType=1,
/* FITRUE_isHK */
/* IFTRUE_isNT */
Var versionType=2,
/* FITRUE_isNT */
```