如何配置Nx仅在本地开发环境提供指定静态资源？

我已在project.json的targets.build.options.assets中添加了如下配置：

{
   "input": "apps/xyz/src/content-providers",
   "glob": "**/*",
   "output": "content-providers"
}

这些资源可在localhost:4200/content-providers/...正常访问。现希望仅在本地开发时提供这些文件，生产环境或部署到测试服务器时不包含，请问能否通过Nx配置实现此需求？

以下是完整的project.json配置：

{
  "name": "xyz",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/xyz/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/mam",
        "index": "apps/xyz/src/index.html",
        "main": "apps/xyz/src/main.tsx",
        "polyfills": "apps/xyz/src/polyfills.ts",
        "tsConfig": "apps/xyz/tsconfig.app.json",
        "assets": [
          "apps/xyz/src/icons/favicon.ico",
          "apps/xyz/src/config.js",
          {
            "input": "apps/xyz/src/content-providers",
            "glob": "**/*",
            "output": "content-providers"
          }
        ],
        "styles": [],
        "scripts": [],
        "webpackConfig": "apps/xyz/webpack.config.js",
        "isolatedConfig": true
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "apps/xyz/src/environments/environment.ts",
              "with": "apps/xyz/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            }
          ]
        },
        "development": {
          "extractLicenses": false,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "executor": "@nx/webpack:dev-server",
      "options": {
        "buildTarget": "xyz:build",
        "hmr": true
      },
      "configurations": {
        "production": {
          "buildTarget": "xyz:build:production",
          "hmr": false
        },
        "development": {
          "buildTarget": "xyz:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "outputs": ["{options.outputFile}"]
    }
  },
  "tags": ["type:app"]
}

完全可以通过Nx的配置分层实现这个需求，核心思路是把仅开发环境需要的资源移到build目标的development配置中，通用资源保留在全局options里。具体操作如下：

1. 修改全局options.assets：移除其中的content-providers配置，只保留所有环境都需要的资源：

"options": {
  // ... 其他配置不变
  "assets": [
    "apps/xyz/src/icons/favicon.ico",
    "apps/xyz/src/config.js"
  ],
  // ... 其他配置不变
}

2. 在development配置中添加专属资源：在targets.build.configurations.development里新增assets字段，把本地开发需要的content-providers加进去：

"development": {
  "extractLicenses": false,
  "optimization": false,
  "sourceMap": true,
  "vendorChunk": true,
  "assets": [
    "apps/xyz/src/icons/favicon.ico",
    "apps/xyz/src/config.js",
    {
      "input": "apps/xyz/src/content-providers",
      "glob": "**/*",
      "output": "content-providers"
    }
  ]
}

效果验证 #

• 运行nx serve：默认使用development配置，构建时会包含content-providers资源，本地可正常访问。
• 运行nx build：默认使用production配置，构建产物中不会包含content-providers资源。
• 若需构建开发版本用于测试，执行nx build --configuration=development，此时会包含该资源。

内容的提问来源于stack exchange，提问作者Axel Productions 86