从 React Redux (create-response-app)中的 package.json 获取版本号

OP 编辑: 如果其他人遇到这种情况: 应用程序是使用 创建-反应-应用程序创建的，这限制了导入到 src 文件夹中。但是，如果您使用 将 response-script 升级到 v1.0.11，它确实允许您访问 package.json。

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

我已经尝试了 这些建议，但是没有一个能够工作，因为我无法从 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/Component/Root.js

找不到模块: 您试图导入 . . ./. ./package.json，它不属于项目 src/ 不支持 src/之外的相对导入 要么将它移动到 src/中，要么从 project 的 Node _ module/.

105814 次浏览
小开

试试这个。

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


// in index.js
import packageJson from '../package.json';
console.log(packageJson.version); // "1.0.0"
小开
最佳答案

根据你的编辑，我建议你试试:

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导入。

另外，请看一下这个问题: Create-response-app 导入 src 目录之外的限制

小开

解决这个问题，而不需要导入 package.json并将其暴露给 create-react-app

要求: 1.1.0 + 版本的创建-反应-应用程序

.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}`)

注意: 版本(和许多其他 配置参数)可以访问

注意2: 只有在重新启动开发服务器之后，才会选择对 .env文件的更改

小开

我不认为通过“导入”或“要求”包获得版本是正确的。 您可以在 package.json 中添加一个脚本

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

您可以在任何 js 文件中通过“ process.env.REACT _ APP _ VERION”获得它。

它也可以在构建脚本中工作，如下所示:

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

进口包 Json

一般来说，进口 package.json不好。原因: 安全性和捆绑包大小的关注

是的，最新的 webpack (默认配置) + ES6 import对 import packageJson from '../package.json'和 import { version } from '../package.json'都进行了树形改变(即只包括 "version"值而不是整个 package.json值)。但是如果您使用 CommonJS (require()) ，或者更改了您的 webpack 配置，或者使用另一个 bundle/transiler，则不能保证这一点。依靠 Bundler 的摇树来隐藏你的敏感数据是很奇怪的。如果您坚持导入 package.json，但是不想暴露整个 package.json，那么您可能需要添加一些构建后检查，以确保删除 package.json中的其他值。

然而，对于 package.json毕竟是公开的开源项目来说，这里的安全问题仍然是理论上的。如果安全性和捆绑包大小都没有问题，或者，不保证的撼动树对您来说已经足够好了，那么请继续)

。 env

.env方法，如果有效，那么它是好的，但是如果不使用 create-react-app，则可能需要安装 dotenv并进行一些其他配置。还有一个 小问题: 不推荐提交 .env文件(< a href = “ https://github.com/motdotla/dotenv # should-i-commit-my-env-file”rel = “ noReferrer”> here and < a href = “Https://github.com/github/gitignore/blob/218a941be92679ce67d0484547e3e142b2f5f6f0/node.gitignore#l72Rel = “ norefrer”> here ) ，但是如果使用 .env方法，看起来必须提交文件，因为它可能成为您的程序工作的必要条件。

最佳实践(可以说)

(这主要不适用于 create-react-app，但是您仍然可以使用 反应，应用，重新连接或 弹射起落架来在 cra 中配置 webpack)

如果使用 webpack，那么使用 定义插件:

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

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

(您可以简单地使用 VERSION而不是 process.env.VERSION，但是它通常需要额外的配置来满足行: 在 .eslintrc(医生)中添加 globals: {VERSION: 'readonly'}; 在用于 TypeScript 的 .d.ts文件中添加 declare var VERSION: string;)

虽然它是“ Npm _ package _ version”，但是它也适用于 yarn。

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

小开

打开 package.json 文件并修改这一行

问题是:

//in package.json

"scripts": {
"dev": "REACT_APP_VERSION=local REACT_APP_VERSION_NUMBER=$npm_package_version react-scripts start",
...
}

解决办法就是

//in package.json

"scripts": {
"dev": "react-scripts start",
...
}

提交答案