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 /.
答案 0 :(得分:30)
解决此问题,而无需导入package.json
并将其展示给create-react-app
需要:{ - 3}} 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}`)
注意: 可以访问该版本(以及许多其他version 1.1.0+)
答案 1 :(得分:27)
试试这个。
// in package.json
"version": "1.0.0"
// in index.js
import packageJson from '../package.json';
console.log(packageJson.version); // "1.0.0"
答案 2 :(得分:12)
从您的编辑中我建议尝试
""
您也可以尝试创建符号链接:
import packageJson from '/package.json';
列出src目录的内容,你会看到符号链接。
# From the project root.
cd src; ln -s ../package.json package.alias.json
添加ls
#=> package.alias.json -> ../package.json
有助于减少其他人和未来的魔力。此外,它还可以帮助文本编辑将它们分开。你以后会感谢我的。只需确保更新JS代码以从.alias
而不是./package.alias.json
导入。
另请看一下这个问题: The create-react-app imports restriction outside of src directory
答案 3 :(得分:6)
一般来说,导入 package.json
不好。原因:安全性和捆绑包大小问题
是的,最新的 webpack(默认配置)+ ES6 import
对 "version"
进行摇树(即只包含 package.json
值而不是整个 import packageJson from '../package.json'
)和import { version } from '../package.json'
。但是如果你使用 CommonJS (require()
),或者改变了你的 webpack 配置,或者使用另一个捆绑器/转译器,则不能保证。依靠捆绑程序的摇树来隐藏您的敏感数据很奇怪。如果您坚持导入 package.json
但不想暴露整个 package.json
,您可能需要添加一些构建后检查以确保删除 package.json
中的其他值。
然而,对于 package.json
毕竟是公开的开源项目,这里的安全问题仍然是理论上的。如果安全性和包大小都没有问题,或者无保证的 tree-shaking 对你来说已经足够了,那么继续)
.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
,但它通常需要额外的配置来满足短绒:在 globals: {VERSION: 'readonly'}
中添加 .eslintrc
(doc) ; 在 declare var VERSION: string;
文件中为 TypeScript 添加 .d.ts
)
虽然它是“npm_package_version”,但它也适用于 yarn
。这是a list of npm's exposed environment variables。
其他打包器可能有类似的插件,例如 @rollup/plugin-replace。
答案 4 :(得分: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",
答案 5 :(得分:0)
我有一个类似的问题,我需要在构建脚本中获取 package.json 版本,使用以下示例很容易。
const packageJson = require("../package.json");
console.log("version: " + packageJson.version);