vue-ifdef-loader

前言

• 首先感谢您的查阅与使用，该 loader 是基于Antonino Porcino <[email protected]>的ifdef-loader(v2.3.2)进行的改造
• 原 loader 仅支持// #if xxx 或 /// #if xxx的写法，现可支持 vue 单文件中template的<!-- #if xxx -->这种写法。
• ifdef-fill-with-blanks默认值改为true，默认行为是删除非当前条件环境下的代码，false为使用/代替非当前环境的代码

安装

npm i vue-ifdef-loader -D

快速上手

const opts = {
  DEBUG: true,
  version: 3,
  age: 15,
  platform: "wechat",
  // 以上参数是你像在项目中使用的环境变量，可以任意设置，配合环境变量更好用

  // 是否打印日志
  "ifdef-verbose": true,
  // 为true是三斜杠作为条件编译标识
  // false 是双斜杠作为条件编译标识
  "ifdef-triple-slash": true,
  // add this to uncomment code starting with "// #code "
  "ifdef-uncomment-prefix": "// #code ",
};
module.exports = {
  chainWebpack: config => {
    // ...
    config.module
      .rule("vue")
      .use("vue-ifdef-loader")
      .loader("vue-ifdef-loader")
      .tap(() => {
        return opts;
      })
      .end();
    // ...
    return config;
  },
};

用法 demo

<template>
  <div id="app">
    <div id="nav">
      <!-- /// #if age == 16 -->
      我15岁
      <!-- /// #else -->
      我不是15岁
      <!-- /// #endif -->
    </div>
  </div>
</template>

<script>
/// #if age == 15
console.log("年龄等于15");
/// #else
console.log("年龄不等于15");
/// #endif
</script>

<style lang="scss">
/// #if age <= 15
body {
  background: red;
}
/// #else
body {
  background: green;
}
/// #endif
</style>

loader 用法介绍

Webpack loader that allows JavaScript or TypeScript conditional compilation (#if ... #elif ... #else ... #endif) directly from Webpack.

Conditional compilation directives are written inside /// triple slash comment so that they don't effect normal JavaScript or TypeScript parsing.

Example:

/// #if DEBUG
console.log("there's a bug!");
/// #endif

The DEBUG or any other variable can be specified when configuring the Webpack loader (see below).

The directive #if accepts any valid JavaScript expression:

/// #if PRODUCTION && version.charAt(0)=='X'
console.log("Ho!");
/// #endif

If the expression is true the block of code between #if and #endif is included, otherwise is excluded by commenting it out.

Additionally, #elif and #else clauses can be added to an #if clause:

/// #if env == 'PRODUCTION'
console.log("Production!");
/// #elif env == 'DEBUG'
console.log("Debug!");
/// #else
console.log("Something else!");
/// #endif

The #if clauses can also be nested:

/// #if PRODUCTION
/// #if OS=="android"
android_code();
/// #elif OS=="ios"
ios_code();
/// #endif
/// #endif

Configuration

Example of use with TypeScript files, enabling the DEBUG and version variables:

In webpack.config.json put vue-ifdef-loader after ts-loader so that files are processed before going into TypeScript compiler:

// define preprocessor variables
const opts = {
   DEBUG: true,
   version: 3,
   "ifdef-verbose": true,                 // add this for verbose output
   "ifdef-triple-slash": false,           // add this to use double slash comment instead of default triple slash
   "ifdef-fill-with-blanks": true,         // add this to remove code with empty spaces instead of "//" comments
   "ifdef-uncomment-prefix": "// #code "  // add this to uncomment code starting with "// #code "
};

/* ... */ {
   test: /\.tsx?$/,
   exclude: /node_modules/,
   use: [
      { loader: "ts-loader" },
      { loader: "vue-ifdef-loader", options: opts }
   ]
}

// alternatively, options can be passed via query string:
const q = require('querystring').encode(opts);
/* ... */ {
   test: /\.tsx?$/,
   exclude: /node_modules/,
   loaders: [ "ts-loader", `vue-ifdef-loader?${q}` ]
}

in example.ts:

/// #if DEBUG
/* code to be included if DEBUG is defined */
///   #if version <2
/* code to be included if DEBUG is defined and version < 2*/
///   #endif
/// #endif

Code in comments

Often times writing #if ... #else ... #endif results in code that is not syntactically valid or does not pass the LINT check. A possible workaround is to hide such code in comments and let vue-ifdef-loader uncomment it if it's part of the block that has to be included in the output.

Example:

The following code is invalid because the linter sees a double declaration of the a variable.

// #if DEBUG
let a=1;
// #else
let a=2;
// #endif

Using code in comments:

// #if DEBUG
let a=1;
// #else
// #code let a=2;
// #endif

The code is now under comment so it's ignored by the linter; but it's uncommented by vue-ifdef-loader if the else branch has to be included in the output (that is when DEBUG==false).

The // #code string prefix can be changed and has to be explictly specified in the options object:

const opts = {
   // ...
   "ifdef-uncomment-prefix": "// #code ",
   // ...
};

License

MIT

Contributions

Contributions in the form of issues or pull requests are welcome.

Changes