preprocess-loader

2024年11月27日

柏拉文

越努力，越幸运

一、认识

---

preprocess-loader 为条件编译预处理 Loader。

二、实现

---

const { preprocess } = require("preprocess");

const defaultOptions = {
  context: {
    mode: "development",
  },
};

module.exports = function (source) {
  const options = {
    ...defaultOptions,
    ...this.getOptions(),
  };

  const type = this.resourcePath.split(".").pop();
  const config = { type };

  try {
    const processedSource = preprocess(source, options.context, config);
    return Promise.resolve(processedSource);
  } catch (error) {
    return Promise.reject(error);
  }
};

三、配置

---

module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        include: Path.resolve(process.cwd(), "src"),
        use: [
          "swc-loader",
          {
            loader: Path.resolve(__dirname, "loader/preprocess-loader.js"),
            options: {
              context: {
                mode: "production",
              },
            },
          },
        ],
      },
    ],
}

四、效果

---

开发时:

// @if mode='development'
console.log("development");
// @endif

// @if mode='production'
console.log("production");
// @endif

构建后:

console.log("production");