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

时间:2017-08-31 09:40:34

标签: node.js reactjs npm react-redux create-react-app

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 installnpm version minornpm 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 /.

6 个答案:

答案 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

一般来说,导入 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文件(herehere),但是如果你执行.env方法,它看起来就像您必须提交文件,因为它可能对您的程序运行至关重要。

最佳实践(可以说)

(这不是主要用于 create-react-app,但您仍然可以使用 react-app-rewiredeject 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);