在react组件文件中使用package.json文件好吗？

Question

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

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

我已经完成了上面的 post 并找到了两种相同的方法。但是 none 我被要求实施。

#1。在构建过程中

#2。通过创建端点

所以我想知道下面的方法是 valid/good 还是不是？

反应前端-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 并使用该文件中提到的任何键（ version in你的情况，但这里唯一的限制是，你应该在应用程序部署后访问 package.json 文件，所以不要忘记在部署环境中移动文件）

所以你的方法似乎没问题。

Answer 2

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

例如我在 webpack 中做了这样的事情：

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

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

反应组件：

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

在react组件文件中使用package.json文件好吗？

Is it good to use package.json file in react component file?

endpoint

reactjs

package.json