React组件中使用package.json是否合理？如何传递版本号至AngularJS

1. React组件文件中直接使用package.json是否合适？ #

其实得分场景来看：

• 开发环境：完全没问题，直接引入package.json来获取版本号这类公开信息很方便。
• 生产环境：如果只是提取version这类非敏感字段，也可以，但有个小风险——如果你的package.json里包含敏感信息（比如private配置、scripts里的密钥、依赖的私有源地址等），直接引入整个文件的话，这些内容可能会被打包到最终的构建产物里，存在泄露风险。

所以更稳妥的做法是：不要直接引入整个package.json，而是单独创建一个version.json文件，只存放版本号：

{
  "version": "3.5.2"
}

然后在React组件里引入这个文件，这样既安全又能拿到需要的版本号。

2. 在React和AngularJS前端中获取package.json的version（避开构建过程和后端端点） #

React端实现 #

如果你确定package.json里没有敏感信息，可以直接在组件中导入并提取version：

import { version } from '../package.json';

function App() {
  return (
    <div>当前版本：{version}</div>
  );
}

export default App;

如果用的是Create React App，这个写法是原生支持的；如果是自定义webpack配置，需要确保webpack已经配置了json-loader（现在webpack5默认支持加载json文件，不需要额外配置）。

如果担心敏感信息泄露，就用前面说的version.json方案：

import { version } from '../version.json';

// 组件中使用方式同上

AngularJS（1.x）端实现 #

AngularJS中可以通过$http请求静态文件来获取版本号，同样推荐用单独的version.json（避免请求整个package.json）：

angular.module('myApp', [])
  .controller('VersionController', function($scope, $http) {
    $http.get('version.json')
      .then(function(response) {
        $scope.appVersion = response.data.version;
      });
  });

然后在模板中展示：

<div ng-controller="VersionController">
  当前版本：{{ appVersion }}
</div>

如果一定要用package.json，只需要把请求路径改成'package.json'即可，但同样要注意生产环境中package.json是否会被部署到静态资源目录，以及是否包含敏感信息。

注意：不管用哪种方式，都要确保静态文件（package.json或version.json）被包含在部署的静态资源中，否则前端会请求404。

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