javascript - 如何从 Angular 构建中排除文件类型？

Question

在 Angular 9 项目中，我正在使用两种环境:生产环境和模拟环境。

我想要那个:

• 当我运行 ng build --prod

• 那么模拟文件不应包含在 js 包中。

我使用扩展名 .mock.ts 来存储模拟文件，并创建 mocks 文件夹，以便更容易过滤它们。

我认为这可以用 webpack 来完成，但我做不到:(

项目结构:

|- app
  |- integration
    |- country
      |- mocks
        get-countries.mock.ts
      country.service.ts
    |- device
      |- mocks
        get-devices.mock.ts
      device.service.ts

这是我在 angular.json 文件中的构建配置:

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
        },
        "mock": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.mock.ts"
            }
          ]
        }
      }
    },
}

这是我的webpack.config.js:

const path = require('path');

module.exports = {
  mode: 'development',
  // make sure the source maps work
  devtool: 'eval-source-map',
  // webpack will transpile TS and JS files
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: ['/node_modules/', '/src/app/integration'],
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
      },
    ],
  },
};

Answer 1

src 文件夹中的 tsconfig.app.json 文件为此有一个特定的排除部分。如果您的模拟目录位于 src 之外，您必须尝试项目根目录中的主 tsconfig.json。