添加辅助 .ts 文件，该文件作为额外的 .js 文件与应用程序一起构建到 dist 中

Question

我想像往常一样编译 Angular + 一个额外的 .ts 文件，该文件在 dist 文件夹中作为自己的 .js 文件输出。

我一直在运行 2 个 npm 脚本

nx build client-extension && npm run client-extension:injector

但是它带来了很多额外的麻烦，而且我不能让第一个命令“观看”，因为第二个命令永远不会触发。我知道有一些选项，例如自定义 webpack 配置等。

但是有没有一种更简单的方法来告诉 NX/Angular 编译应用程序+一个额外的文件？ 它与 Angular Worker 文件一起使用（它们成为单独的 .js 文件），因此正在考虑滥用该逻辑，但这也不是很好。

这是我当前的项目.json：

{
  "name": "client-extension",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "candlejumper",
  "sourceRoot": "apps/client-extension/src",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/client-extension",
        "index": "apps/client-extension/src/index.html",
        "browser": "apps/client-extension/src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "apps/client-extension/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": ["apps/client-extension/src/favicon.ico", "apps/client-extension/src/assets", "apps/client-extension/src/manifest.json"],
        "styles": ["apps/client-extension/src/style/styles.scss"]
      },

所以基本上，我想向project.json 添加一个选项，例如

{
  "extraFiles": ["./my-second-entry.ts"]
}

Answer 1

styles

文件的

scripts

和

angular.json

部分不仅支持纯字符串。您可以在此处指定应生成哪些捆绑包 @angular-devkit/build-angular:browser，以及是否应立即在 index.html 中加载它们。

"build": {
  ...
  "options": {
    "outputPath": "dist/xxx",
    "index": "xxx/src/index.html",
    "main": "xxx/src/main.ts",
    "polyfills": "xxx/src/polyfills.ts",
    "tsConfig": "xxx/tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "assets": [
      "xxx/src/favicon.ico",
      "xxx/src/assets",
      "xxx/src/web.config"
    ],
    "styles": [
      "xxx/src/styles.scss",
      {
        "input": "xxx/src/styles/solarized-dark.scss",
        "inject": false,
        "bundleName": "solarized-dark"
      }
    ],
    "scripts": [
      "xxx/scripts/some-script.js",
      {
        "input": "xxx/scripts/path/to/some-typescript.ts",
        "bundleName": "other-scripts",
        "inject": true
      }
    ]
  },
  ...
}