在 Angular (>= 2) 应用程序中，如何将 npm package.json 文件中的版本信息包含到已编译的输出文件中？

Posted 2023-03-07

【中文标题】在 Angular (>= 2) 应用程序中，如何将 npm package.json 文件中的版本信息包含到已编译的输出文件中？

【英文标题】：In an Angular (>= 2) application, how to include version information from npm package.json file into the compiled output files?

【发布时间】：2017-12-03 15:07:11

【问题描述】：

信息：

我使用 @angular/cli 创建了一个 Angular（版本 >= 2）应用程序。

此应用程序正在进行版本更改。

我确实使用命令npm version major 或npm version minor 或npm version patch 在我的package.json 文件中更新了我的应用程序的语义版本信息。

当我运行 ng build 或 ng build --prod 时，我无法在“dist”输出文件夹的任何文件中找到此版本信息。

问题：

有没有办法自动将我的应用程序的版本信息从 package.json 文件带入其中一个输出文件（可能在 html 文件或 js 文件中）？

来自我的package.json 文件的示例：

  "name": "angular-ui",
  "version": "17.6.27",
  "description": "My awesome UI application",
  "license": "MIT",
  ...

理想情况下，我想创建一个“关于”组件，当我访问类似于以下内容的 URL 时，我想在其中发布应用程序的版本信息：

http://localhost:4200/about

页面上的预期输出：

Application version: v17.6.27

【参考方案1】：

您可以创建一个自定义脚本，该脚本将从您的 package.json 中读取信息并运行 echo "export const APP_VERSION = $version" > src/app/version.ts。

然后你在构建之前调用这个脚本。

如果您使用 ng-cli 创建应用，您的 package.json 中应该已经有脚本条目。类似的东西：

"scripts": 
  "ng": "ng",
  "changelog": "standard-changelog",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
,

您可以将 build 替换为

"scripts": 
  "build": "sh version-script.sh && ng build",

我认为您可以找到一些比糟糕的 script.sh 做得更好的精美工具，并在构建之前将它们连接起来。

【讨论】：

这看起来是个好主意。谢谢@Noémi Salaün，我会试试这个，让你知道这是怎么回事。