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

Question

OP编辑:如果有其他人遇到这个:该应用程序是使用create-react-app创建的,它限制导入到src文件夹中.但是,如果将react-scripts升级到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/components/Root.js

找不到模块:您试图导入位于项目src /目录之外的./../../package.json.不支持src /之外的相对导入.你可以在src /中移动它,或者从项目的node_modules /中添加一个符号链接.

Answer 1

没有进口和暴露解决这个package.json到create-react-app

需要: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}`)

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

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' 或 '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 4

从你的编辑我建议尝试

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.

另请看一下这个问题: 在src目录之外的create-react-app导入限制

Answer 5

导入 package.json

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

是的，最新的WebPack（默认配置）+ ES6import确实树摇动（即只包括"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文件（此处和此处），但是如果您执行该.env方法，则看起来您必须提交文件，因为它可能对您的程序工作至关重要。

最佳实践（可以说）

（这不是主要用于create-react-app，但您仍然可以使用react-app-rewired或弹出 cra以便webpack在 cra 中进行配置）

如果您使用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;在.d.ts文件打字稿）

尽管它是“ npm _package_version”，但它也适用yarn。这是 npm 公开的环境变量的列表。

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