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

需要：{ - 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+）

Answer 2

试试这个。

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

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

Answer 3

从您的编辑中我建议尝试

""

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

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

Answer 4

导入 package.json

一般来说，导入 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

.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。

Answer 5

我认为通过'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 6

我有一个类似的问题，我需要在构建脚本中获取 package.json 版本，使用以下示例很容易。

const packageJson = require("../package.json");
console.log("version: " + packageJson.version);

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

6 个答案:

导入 package.json

.env

最佳实践（可以说）