在 React Redux (create-react-app) 中从 package.json 获取版本号
Get version number from package.json in React Redux (create-react-app)
OP 编辑:如果其他人遇到此问题:该应用程序是使用 create-react-app, which limits importing to within the src folder. However if you upgrade react-scripts to v1.0.11 创建的,它确实允许您访问 package.json.
我正在尝试从我的应用程序中的 package.json 获取版本号。
我已经尝试了 these suggestions,但是其中 none 成功了,因为我无法从 src 文件夹外部访问 package.json(可能是由于 React,我对此很陌生)。将 package.json 移动到 src 意味着我无法从我的根文件夹中 运行 npm install
、npm version minor
和 npm run build
。我试过使用 process.env.npm_package_version
但结果是 undefined.
我正在使用 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
Module not found: You attempted to import
./../../package.json which falls outside of the project src/
directory. Relative imports outside of src/ are not supported. You can
either move it inside src/, or add a symlink to it from project's
node_modules/.
试试这个。
// 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
.
导入
另外,请看一下这个问题:
无需导入和公开 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
我认为通过 '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",
进口package.json
一般来说,导入package.json
不好。原因:安全和包大小问题
是的,最新的 webpack(默认配置)+ ES6 import
对 [=15] 进行 tree-shaking(即只包含 "version"
值而不是整个 package.json
) =] 和 import { version } from '../package.json'
。但如果你使用 CommonJS (require()
),或者更改了你的 webpack 配置,或者使用另一个 bundler/transpiler,则不能保证。依靠 bundler 的 tree-shaking 来隐藏你的敏感数据是很奇怪的。如果您坚持导入 package.json
但不想暴露整个 package.json
,您可能需要添加一些 post-构建检查以确保删除 package.json
中的其他值。
然而,这里的安全问题对于 package.json
是 public 的开源项目来说仍然是理论上的。如果安全性和包大小都没有问题,或者非保证的 tree-shaking 对你来说足够好,那么继续吧)
.env
.env
方法,如果有效,那很好,但是如果你不使用create-react-app
,你可能需要安装dotenv
并做一些额外的配置。还有一个 小问题:不建议提交 .env
文件 (here and here),但是如果你使用 .env
方法,看起来你会有提交文件,因为它可能对您的程序工作至关重要。
最佳实践(有争议)
(这主要不是针对 create-react-app
,但您仍然可以使用 react-app-rewired or 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
,但它通常需要额外的配置来满足 linters:在 .eslintrc
中添加 globals: {VERSION: 'readonly'}
(doc); 在 TypeScript 的 .d.ts
文件中添加 declare var VERSION: string;
)
虽然它是“npm_package_version”,但它也适用于 yarn
。这里是 a list of npm's exposed environment variables.
其他打包器可能有类似的插件,例如,@rollup/plugin-replace。
打开您的 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",
...
}
OP 编辑:如果其他人遇到此问题:该应用程序是使用 create-react-app, which limits importing to within the src folder. However if you upgrade react-scripts to v1.0.11 创建的,它确实允许您访问 package.json.
我正在尝试从我的应用程序中的 package.json 获取版本号。
我已经尝试了 these suggestions,但是其中 none 成功了,因为我无法从 src 文件夹外部访问 package.json(可能是由于 React,我对此很陌生)。将 package.json 移动到 src 意味着我无法从我的根文件夹中 运行 npm install
、npm version minor
和 npm run build
。我试过使用 process.env.npm_package_version
但结果是 undefined.
我正在使用 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
Module not found: You attempted to import ./../../package.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
试试这个。
// 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
.
另外,请看一下这个问题:
无需导入和公开 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
我认为通过 '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",
进口package.json
一般来说,导入package.json
不好。原因:安全和包大小问题
是的,最新的 webpack(默认配置)+ ES6 import
对 [=15] 进行 tree-shaking(即只包含 "version"
值而不是整个 package.json
) =] 和 import { version } from '../package.json'
。但如果你使用 CommonJS (require()
),或者更改了你的 webpack 配置,或者使用另一个 bundler/transpiler,则不能保证。依靠 bundler 的 tree-shaking 来隐藏你的敏感数据是很奇怪的。如果您坚持导入 package.json
但不想暴露整个 package.json
,您可能需要添加一些 post-构建检查以确保删除 package.json
中的其他值。
然而,这里的安全问题对于 package.json
是 public 的开源项目来说仍然是理论上的。如果安全性和包大小都没有问题,或者非保证的 tree-shaking 对你来说足够好,那么继续吧)
.env
.env
方法,如果有效,那很好,但是如果你不使用create-react-app
,你可能需要安装dotenv
并做一些额外的配置。还有一个 小问题:不建议提交 .env
文件 (here and here),但是如果你使用 .env
方法,看起来你会有提交文件,因为它可能对您的程序工作至关重要。
最佳实践(有争议)
(这主要不是针对 create-react-app
,但您仍然可以使用 react-app-rewired or 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
,但它通常需要额外的配置来满足 linters:在 .eslintrc
中添加 globals: {VERSION: 'readonly'}
(doc); 在 TypeScript 的 .d.ts
文件中添加 declare var VERSION: string;
)
虽然它是“npm_package_version”,但它也适用于 yarn
。这里是 a list of npm's exposed environment variables.
其他打包器可能有类似的插件,例如,@rollup/plugin-replace。
打开您的 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", ... }