Angular构建时添加额外外部文件的实现及CMS集成方案咨询

完全可以实现，核心思路是在Angular正式构建执行前，提前把CMS中的资源拉取到本地待打包目录，再纳入Angular的默认构建流程，具体可选方案如下：

• 方案1：使用prebuild钩子拉取资源（最轻量）
  在package.json的scripts中新增prebuild钩子脚本，优先级高于build命令，会自动在构建前执行：

  {
    "scripts": {
      "prebuild": "node ./scripts/pull-cms-assets.js",
      "build": "ng build"
    }
  }
  

  自行编写pull-cms-assets.js脚本，逻辑为请求CMS的资源列表接口，将图片、JSON等资源批量下载到本地指定目录（例如src/cms-assets），同时可以加缓存逻辑避免重复下载不变更的资源。
  之后在angular.json中新增该目录到构建资源列表：

  {
    "projects": {
      "your-project": {
        "architect": {
          "build": {
            "options": {
              "assets": ["src/favicon.ico", "src/assets", "src/cms-assets"]
            }
          }
        }
      }
    }
  }
  

  Angular执行构建时会自动把该目录下所有资源复制到最终的dist产物中。
• 方案2：自定义webpack构建流程
  如果你已经在项目中使用@angular-builders/custom-webpack扩展构建能力，可以直接编写webpack插件在构建的beforeRun钩子中执行资源拉取逻辑，无需单独配置prebuild钩子，整个流程都在构建链路内完成。

是否推荐取决于你的业务场景：

• 如果内容更新频率较高（每周至少1-2次）、需要运营自主发布内容，非常推荐该方案：可以在CMS中配置内容发布触发webhook，调用GitHub Actions自动执行资源拉取、Angular构建、部署到服务器的全流程，无需开发人员介入，同时所有内容变更都可以在GitHub中留存版本记录，出现问题可以快速回滚到历史版本。
• 如果内容更新频率极低（几个月才变更一次），不需要投入额外成本配置自动部署链路，直接用本地构建前拉取资源的方案即可满足需求。
• 注意如果CMS中存在敏感资源，需确保GitHub仓库为私有，避免涉密内容泄露。

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