conditional-compile-loader

conditional-compile-loader 根据设定的参数对 vue、js、jsx 和 css(less, sass 等) 代码进行条件编译。

Getting Started

先安装 conditional-compile-loader

npm install -D conditional-compile-loader
# or
yarn add -D conditional-compile-loader

然后添加这个 loader 到 webpack 配置，例如：

example.vue

<template>
  <div>
    <!-- #ifdef FLAG -->
    <header>FLAG</header>
    <!-- #endif -->
    <!-- #ifdef FLAG-A || FLAG-B -->
    <header>FLAG-A OR FLAG-B</header>
    <!-- #endif -->
  </div>
</template>

example.js

// #ifdef FLAG
console.log('FLAG')
// #endif
// #ifdef FLAG-A || FLAG-B
console.log('FLAG-A OR FLAG-B')
// #endif

example.jsx

{/* #ifdef FLAG */}
<header>FLAG</header>
{/* #endif */}

{/* #ifdef FLAG-A || FLAG-B */}
<header>FLAG-A OR FLAG-B</header>
{/* #endif */}

example.less

body {
  /* #ifdef FLAG */
  background: cornflowerblue;
  /* #endif */
  /* #ifdef FLAG-A || FLAG-B */
  background: pink;
  /* #endif */
}

webpack.config.js

rules: [
  {
    test: /\.vue$/,
    use: [
      {
        loader: 'vue-loader',
      },
      {
        loader: 'conditional-compile-loader',
        options: {
          FLAG: true,
          'FLAG-A': true
        }
      }
    ]
  },
  {
    test: /\.jsx?$/,
    use: [
      {
        loader: 'babel-loader',
      },
      {
        loader: 'conditional-compile-loader',
        options: {
          FLAG: true,
          'FLAG-B': true
        }
      }
    ]
  },
  {
    test: /\.less$/,
    use: [
      {
        loader: 'less-loader',
      },
      {
        loader: 'conditional-compile-loader',
        options: {
          FLAG: true,
          'FLAG-A': true
        }
      }
    ]
  }
]

Options

错误使用情况

变量名必须严格符合正则 /[A-Z-]+/，否则不会进行条件编译，例如：

<template>
  <div>
    <!-- #ifdef flag -->
    <header>FLAG</header>
    <!-- #endif -->
    <!-- #ifdef FLAG-a || flag-B -->
    <header>FLAG-A OR FLAG-B</header>
    <!-- #endif -->
  </div>
</template>