使用带有 Angular 13 和 Webpack 的 ifdef-loader 进行条件编译？

Question

我有一个严重依赖条件编译的 Ionic 应用程序，我在其中根据一组类似于 m4 工作方式的配置值来包含或排除代码块。

我一直在使用 https://github.com/nippur72/ifdef-loader 成功地达到这个目的。

我现在面临将此应用程序从 Angular 10 升级到 13（Ionic 5 到 6）的问题。

ifdef-loader 无法与 Angular 10 开箱即用，但 @angular-dev-kit 的补丁 (https://gist.github.com/tristanidoux/892469f2c345bd6c6551eb19c705a016) 允许它运行.

此补丁不适用于 Angular 13，因为所有文件都已更改并尽可能多地搜索源代码我还不知道如何为 [=52 创建类似的补丁=] 13.

所以我一直在尝试使用 "@angular-builders/custom-webpack": "^13.0.0" 并使用 https://medium.com/angular-in-depth/customizing-angular-cli-build-an-alternative-to-ng-eject-v2-c655768b48cc 作为指导。

我有以下 custom.webpack.config.js 仿照 ifdef-loader 文档的文件：

// ifdef-loader config

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          { loader: 'ts-loader' },
          { loader: 'ifdef-loader', options: opts }
        ]
      }
    ]
  },

不幸的是，如果没有调用 def-loader，这似乎不起作用。

所以三个问题：

我的配置是否犯了一些明显的错误？
有没有人让 ifdef-loader 与 Angular 13 一起工作？如果是，怎么做？
或者，对于 Angular 13 项目中有条件的 including/excluding 代码块是否有其他解决方案？

如有任何指点或建议，我们将不胜感激。

Answer 1

一周后，我一直无法确定如何在 Angular 的 webpack 实现中将模块插入 typescript 编译管道，所以我选择为 @angular-devkit/build-angular/ 创建一个补丁@ngtools/webpack直接调用ifdef-loader。

补丁在这里：Angular Webpack Patch

虽然很丑，但是很管用。

Answer 2

如果将 webpack 配置导出为 webpack.config.js 的函数，它就可以工作：

module.exports = (config, options, targetOptions) => {
    const ifdef_opts = {
        DEBUG: config.mode === 'development',
        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 blank spaces instead of "//" comments
        "ifdef-uncomment-prefix": "// #code "  // add this to uncomment code starting with "// #code "
    };
    config.module.rules.some(({test, use}) => {
        if (use && test && 'dummy.ts'.match(test)) {
            use.push({
                loader: "ifdef-loader",
                options: ifdef_opts
            })
            return true;
        }
        return false;
    })

    return config;
};

使用带有 Angular 13 和 Webpack 的 ifdef-loader 进行条件编译？

Conditional compilation using ifdef-loader with Angular 13 and Webpack?

conditional-compilation

typescript

ionic-framework

webpack

angular13