在反应组件文件中使用 package.json 文件好吗？答案

【问题标题】：Is it good to use package.json file in react component file?在反应组件文件中使用 package.json 文件好吗？
【发布时间】：2021-01-15 02:59:56
【问题描述】：

我必须在前端（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。通过创建端点

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

react-front-end-file.js

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

让我知道这种方法是否可行。

【问题讨论】：

标签： reactjs endpoint package.json

【解决方案1】：

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

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

相反，由于 package.json 是一个包含 json 对象的文件，因此您可以使用它来导入 json 并使用该文件中提到的任何键（版本在您的情况下，但这里唯一的限制是，您应该有权访问应用部署后到 package.json 文件，所以不要忘记在部署环境中移动文件）

所以你的方法似乎很好。

【讨论】：

【解决方案2】：

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

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

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

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

反应组件：

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

【讨论】：