NX Monorepo中Angular库Lib_A独立管理node_modules资源方案咨询

你可以通过以下两种方式让Lib_A自行管理node_modules中的资源，无需依赖应用的配置：

方案1：在Lib_A的build目标中配置assets #

直接在Lib_A的project.json的build目标里添加assets配置，构建时自动将指定的node_modules资源复制到库的dist目录中：

{
  "name": "lib_a",
  ...,
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:ng-packagr",
      "options": {
        "project": "libs/lib_a/ng-package.json",
        "assets": [
          // 示例：复制某个npm包的assets目录到Lib_A dist的assets/some-package路径下
          {
            "glob": "**/*",
            "input": "./node_modules/some-package/assets",
            "output": "./assets/some-package"
          }
        ]
      }
    },
    "test": {
      ...
    },
    "lint": {
      ...
    }
  }
}

说明 #

• 配置中的glob指定要匹配的资源文件规则，input是node_modules中资源的源路径，output是资源在Lib_A dist目录中的存放位置。
• Lib_A内部引用资源时，可使用相对路径（如./assets/some-package/icon.png），打包后路径会自动对应到dist目录的正确位置。
• 应用引入Lib_A时，这些资源会随库的打包产物一起被加载，无需应用额外配置资源路径。

方案2：自定义copy-assets任务（更灵活的场景） #

如果需要对资源进行批量复制或预处理，可添加自定义的资源复制任务，并让build任务依赖该任务：

{
  "name": "lib_a",
  ...,
  "targets": {
    "copy-assets": {
      "executor": "@nrwl/workspace:copy",
      "options": {
        "source": "node_modules/some-package/assets",
        "destination": "dist/libs/lib_a/assets/some-package",
        "watch": false
      }
    },
    "build": {
      "executor": "@angular-devkit/build-angular:ng-packagr",
      "options": {
        "project": "libs/lib_a/ng-package.json"
      },
      "dependsOn": ["copy-assets"]
    },
    "test": {
      ...
    },
    "lint": {
      ...
    }
  }
}

说明 #

• copy-assets任务使用@nrwl/workspace:copy执行器，将指定资源从node_modules复制到Lib_A的dist目录。
• 通过dependsOn让build任务在执行前先完成资源复制，确保资源已就位。
• 若需要监听资源变化（开发模式），可将watch设为true。

内容的提问来源于stack exchange，提问作者Motassem Jalal