从 React Redux 中的 package.json 获取版本号（create-react-app）

Question

OP 编辑​​：如果其他人遇到此问题：该应用程序是使用 create-react-app 创建的，这将导入限制在 src 文件夹内。但是，如果您 upgrade react-scripts to v1.0.11 它确实可以让您访问 package.json。

我正在尝试从我的应用程序中的 package.json 获取版本号。

我已经尝试过these suggestions，但它们都没有工作，因为我无法从 src 文件夹外部访问 package.json（可能是由于 React，我是新手）。将 package.json 移动到 src 意味着我无法从我的根文件夹运行 npm install、npm version minor 和 npm run build。我试过使用process.env.npm_package_version，但这会导致未定义。

我正在使用 Jenkins，我还没有设置它来推送提交，但我唯一的想法是从 GitLab 中的标签中获取版本，但我不知道该怎么做，它会给回购添加不必要的依赖，所以我真的很想找到一个替代方案。

编辑： 我的文件结构是这样的：

--> RootAppFolder
    |--> build
    |--> node_modules
    |--> public
    |--> src
         |--> Components
              |--> Root.js
    |
    |--> package.json

所以要从 Root.js 访问 package.json，我必须执行 import packageJson from './../../package.json'，然后我收到以下错误：

./src/components/Root.js

未找到模块：您尝试导入 ./../../package.json 不属于项目 src/ 目录。不支持 src/ 之外的相对导入。你可以 要么将它移到 src/ 中，要么从项目的 node_modules/.

Answer 1

在不导入 package.json 并将其暴露给 create-react-app 的情况下解决此问题

要求：version 1.1.0+ of create-react-app

.env

REACT_APP_VERSION=$npm_package_version
REACT_APP_NAME=$npm_package_name

index.js

console.log(`${process.env.REACT_APP_NAME} ${process.env.REACT_APP_VERSION}`)

注意：版本（以及许多其他npm config params）可以访问

注意 2： 对 .env 文件的更改只有在您 restart the development server 之后才会被选中

Answer 2

根据您的编辑，我建议您尝试：

import packageJson from '/package.json';

您也可以尝试创建符号链接：

# From the project root.
cd src; ln -s ../package.json package.alias.json

列出 src 目录的内容，你会看到符号链接。

ls
#=> package.alias.json -> ../package.json

添加.alias 有助于减少对他人和未来自己的“魔力”。另外，它将帮助文本编辑器将它们分开。你以后会感谢我的。只需确保更新 JS 代码以从 ./package.alias.json 导入而不是 ./package.json。

另外，请看一下这个问题： The create-react-app imports restriction outside of src directory

Answer 3

试试这个。

// in package.json
"version": "1.0.0"

// in index.js
import packageJson from '../package.json';
console.log(packageJson.version); // "1.0.0"

Answer 4

我认为通过“import”或“require”包获取版本是不正确的。 您可以在 package.json 中添加脚本

"start": "REACT_APP_VERSION=$npm_package_version react-app-script start",

你可以通过任何js文件中的“process.env.REACT_APP_VERSION”获取。

它也适用于构建脚本，如下所示：

"build": "REACT_APP_VERSION=$npm_package_version react-app-script build",

Answer 5

导入包.json

一般来说，导入package.json 不好。原因：安全性和包大小问题

是的，最新的 webpack（默认配置）+ ES6 import 对 import packageJson from '../package.json' 和 import { version } from '../package.json' 进行 tree-shaking（即仅包括 "version" 值而不是整个 package.json）。但不能保证您是否使用 CommonJS (require())，或者更改了您的 webpack 配置，或者使用其他捆绑器/转译器。依靠 bundler 的 tree-shaking 来隐藏你的敏感数据是很奇怪的。如果您坚持导入 package.json 但不希望整个 package.json 暴露，您可能需要添加一些构建后检查以确保删除 package.json 中的其他值。

但是，对于 package.json 毕竟是公开的开源项目来说，这里的安全问题仍然是理论上的。如果安全性和包大小都没有问题，或者，非保证的 tree-shaking 对你来说已经足够好了，那么继续）

.env

.env的方法，如果行得通，那很好，但是如果你不使用create-react-app，你可能需要安装dotenv并做一些额外的配置。还有一个小问题：不建议提交.env 文件（here 和here），但是如果你使用.env 方法，看起来你将不得不提交文件 因为它可能对您的程序运行至关重要。

最佳实践（可以说）

（这主要不是针对create-react-app，但您仍然可以使用react-app-rewired 或eject cra 来在cra 中配置webpack）

如果你使用webpack，那么使用DefinePlugin：

plugins: [
  new webpack.DefinePlugin({
    'process.env.VERSION': JSON.stringify(
      process.env.npm_package_version,
    ),
  }),
]

您现在可以在前端程序（开发或生产）中使用console.log(process.env.VERSION)。

(你可以简单地使用VERSION而不是process.env.VERSION，但它通常需要额外的配置来满足linter：在.eslintrc(doc)中添加globals: {VERSION: 'readonly'}；在.d.ts文件中添加declare var VERSION: string;对于打字稿）

虽然它是“npm_package_version”，但它也适用于 yarn。这是a list of npm's exposed environment variables。

其他捆绑器可能有类似的插件，例如，@rollup/plugin-replace。