[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*/結(jié)尾悴灵，中間是被包裹的js代碼。xxx是在webpack中指定的條件屬性名攘滩，如上面的isHK。
在項目代碼中設(shè)置如下
```
{ name: '用戶部門', value: 'usrDepartId' },
? /* IFTRUE_isHK */
? { name: '艙門管理', value: 'id' },
? /* FITRUE_isHK */
? { name: '手機號', value: 'telphone' },
```
+ 編譯執(zhí)行
在終端輸入**npm run dev –hk**
可以看到艙門管理
在終端輸入**npm run dev**
可以看到艙門管理被隱藏
### 樣式的條件編譯
問題來了，樣式的條件編譯我想用以下兩個方式實現(xiàn)，都遇到了問題董朝，請大神指點：
對vue接觸時間較短，框架底層不了解,不知道怎么進行設(shè)置干跛，在線等
#### 1. 類似js條件編譯子姜，在webpack中進行配置
進行如下設(shè)置后，樣式的條件編譯無法實現(xiàn)
```
{
? ? ? ? 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. 設(shè)置全局變量楼入，通過條件渲染以實現(xiàn)不同效果
比如設(shè)置全局變量? *versionType為1或2*
執(zhí)行 **npm run dev --hk** 時versionType為1
執(zhí)行 **npm run dev --nt** 時versionType為2
問題來了哥捕，在終端執(zhí)行**npm run dev –hk**時，在哪設(shè)置全局變量versionType=1（執(zhí)行不同分支代碼浅辙，實現(xiàn)1hk扭弧、2nt）?
以下代碼為全局變量，需要在哪設(shè)置：
```
? /* IFTRUE_isHK */
? Var versionType=1,
? /* FITRUE_isHK */
? /* IFTRUE_isNT */
? Var versionType=2,
? /* FITRUE_isNT */
```
