Question

我必须在前端（react js）文件中使用package.json文件中提到的版本。

{ "name": "asdfg", "version": "3.5.2", // want to use this "description": "description", "scripts": {} //etc etc etc ...... }

Send package.json [version] to Angularjs Front end for display purposes

我经历了上述帖子并找到了两种方法。但我没有被要求实施。

＃1。在构建过程中

＃2。通过创建端点

所以我想知道下面的方法是否有效？

反应-前端-file.js

import packageJson from '../package.json'; // imported
...
...
// Usage which gives me version - 3.5.2
<div className='app-version'>{packageJson.version}</div>

请告诉我这种方法是否合适。

Answer 1

以下2种方法似乎要么具有依赖性，要么添加可能不需要的额外实现

在构建过程中 - （依赖于像webpack等模块捆绑器）。
通过创建端点 - （在服务器上需要额外的代码才能获得版本）

相反，因为package.json是一个文件，它接受json对象，所以你可以使用它来导入json并使用它在该文件中提到的任何键（在你的情况下版本，但这里只有约束，你应该有访问权限）应用程序部署后的package.json文件，所以不要忘记在部署环境中移动文件）

所以你的方法似乎很好。

Answer 2

我会做这样的事情：在模块捆绑器中，需要包json文件并定义全局变量并在任何地方使用它

e.g。我在webpack中做了类似的事情：

const packageJson = require('./package.json')

const plugins = [
  new webpack.DefinePlugin(
    {
      '__APPVERSION__': JSON.stringify(packageJson.version)
    }
 )
]

反应组件：

<div className='app-version'>{__APPVERSION__}</div>

在反应组件文件中使用package.json文件是否合适？

2 个答案: