@umu-team/preprocess-loader

条件编译

Install

npm i -D @umu-team/preprocess-loader

Usage

webpack 中的配置：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          'ts-loader',
          {
            loader: '@umu-team/preprocess-loader',
            options: {
              context: {
                IS_PRODUCTION: true
                ...
              },
            },
          },
        ],
      },
    ];
  }
}

假设页面代码中可使用的编译参数为：

• SYSTEM 当前系统
• LOCALE 当前语言
• DEBUG 是否调试模式，可进行测试代码相关的控制
• IS_PRODUCTION 区分线上与线下环境

示例：

// @if LOCALE = 'JP'
console.log('当前语言：日语')
//@endif

// @if LOCALE != 'JP'
console.log('当前语言：非日语')
//@endif

// @if IS_PRODUCTION
console.log('线上环境')
//@endif

// @if !IS_PRODUCTION
console.log('线下环境')
//@endif

具体使用详见 preprocess

已知问题

与 Sass 配合使用时，因为 sass 文件中通过 @import 导入的文件是 sass 自己处理的，而非 webpack。 即 webpack 不能分析 sass 文件中的引用关系，所以 webpack 的 loader 只作用于 js 中直接引用进来的 sass 文件， 而这个 sass 文件中如果还 @import 了其他 sass 文件，后续这些文件不会被 load 处理。

示例：

index.jsx

import './index.scss'

index.scss

@import './other.scss'
body{
  color:red;
}

other.scss

/* @if IS_PRODUCTION */
body{
  color: blue;
}
/* @endif */

other.scss 中的条件编译不会生效，因为它是在 sass 文件中通过 @import 句法导入到项目中的，没有被 webpack 分析到。

所以，为了解决上述问题，其他 loader 应该在 sass-loader 之后调用。

示例：

{
  test: /\.scss$/,
  use: [
      {
        loader: "css-loader",
        options: {
          importLoaders: 2
        }
      },
      {
        loader: "@umu-team/preprocess-loader", // 此时拿到的是处理过 `@import` 完整的 sass 文件
        options: {
          context: {
            IS_PRODUCTION: env.IS_PRODUCTION
          }
        }
      },
      "sass-loader" // sass-loader 先处理 sass 文件，将导入合成一个文件传递给下游其他 loader
    ]
}

同时，sass 文件中注释需使用多行注释的方式 /* */ 而不是 // 开头的单行注释。