解决这个问题而不导入和暴露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 配置参数）

注意 2：.env只有在您重新启动开发服务器后才会选择对文件的更改

根据您的编辑，我建议尝试：

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 代码以导入 from./package.alias.json而不是./package.json.

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

试试这个。

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

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

我认为通过 '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（默认配置）+ ES6import确实树摇动（即只包括"version"值，而不是整个package.json）两个import packageJson from '../package.json'和import { version } from '../package.json'。但是如果你使用 CommonJS ( require())，或者已经改变了你的 webpack 配置，或者使用了其他的 bundler/transpiler ，就不能保证了。依靠捆绑程序的摇树来隐藏您的敏感数据很奇怪。如果您坚持导入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文件typescript）

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

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