Angular构建时传递自定义变量并在angular.json中获取的方法

嘿，这个需求其实很容易实现，分两步就能搞定：先在构建命令里传自定义变量，再在angular.json里读取它来配置要包含的文件。我给你详细拆解下：

一、传递自定义变量到构建命令 #

你有两种常用的方式来传递变量，选哪种都可以：

方式1：使用环境变量（跨平台推荐） #

不同系统的命令写法略有区别：

• Windows CMD：

  set FILE_TO_INCLUDE=a1 && ng build
  

• Windows PowerShell：

  $env:FILE_TO_INCLUDE="a1"; ng build
  

• Linux/macOS：

  FILE_TO_INCLUDE=a1 ng build
  

方式2：直接通过Angular CLI传递命令行参数 #

直接在ng build后面加自定义参数，参数名前加--：

ng build --fileToInclude=a1

二、在angular.json中读取变量并配置文件引入 #

接下来要在angular.json里配置，让构建时根据变量值包含对应的文件。分两种常见场景：

场景1：将文件作为静态资源打包到dist目录 #

找到你的项目在angular.json中的build配置里的assets数组，添加一个动态配置项，用占位符引用你传递的变量：

如果用环境变量（方式1）：

"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/favicon.ico",
            "src/assets",
            {
              "glob": "${env:FILE_TO_INCLUDE}",
              "input": "./", // 这里是目标文件所在的文件夹路径，当前示例为项目根目录
              "output": "./" // 打包后输出到dist的根目录
            }
          ],
          // 其他构建配置...
        }
      }
    }
  }
}

如果用命令行参数（方式2）：

把占位符改成${args.fileToInclude}即可：

{
  "glob": "${args.fileToInclude}",
  "input": "./",
  "output": "./"
}

场景2：将文件作为脚本打包到项目中 #

如果你的a1/a2/a3是JS脚本，需要加到scripts数组里，同样用占位符：

"scripts": [
  "./${env:FILE_TO_INCLUDE}" // 或者 ${args.fileToInclude}
]

三、可选：设置默认值 #

如果希望没传变量时默认包含某个文件（比如a1），可以在占位符后面加:默认值：

"glob": "${env:FILE_TO_INCLUDE:a1}"

这样就算没传FILE_TO_INCLUDE变量，构建时也会自动包含a1文件。

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