从项目中为导入的组件反应组件环境变量答案

【问题标题】：React Component env variables from project for imported component从项目中为导入的组件反应组件环境变量
【发布时间】：2020-01-03 12:31:42
【问题描述】：

我有一个 Create React 项目，其中包含一些用于配置的本地环境变量。我有一个使用 env 变量来配置自身的组件。它使用

导入变量

process.env.MY_VAR;

我想将组件移出到 npm 包中，但保留使用 process.env.MY_VAR 的能力。当我构建和发布包时，它将使用当前的MY_VAR 构建它，而不是我想要导入的项目中的MY_VAR。有没有办法我可以做我所追求的。

我考虑过重构组件以将环境变量作为道具，但这不是我真正想做的事情。

有没有办法可以做我所追求的。

【问题讨论】：

你在哪里设置你的 MY_VAR ？你用过 webpack 吗？
你试过用这个吗？ npmjs.com/package/dotenv

标签： reactjs npm npm-package

【解决方案1】：

如何将您的组件库视为已经完全/独立于构建变量构建并可供 npm 客户端使用的 npm 包？

除非您想将该库用作某种与周围构建环境自然有很多耦合的内部包，否则采用经典的 npm 方法可能更容易。如果您想发布软件包，这尤其有意义。在您的导入应用项目中，您仍然可以使用process.env.MY_VAR。对于库部分，我建议提交一个配置对象。

如果process.env.MY_VAR 对于包含多个组件的整个库很重要，请从包初始化步骤开始：

import { init } from "my-comp-library"

const config = {
  myVar: process.env.MY_VAR
}

const lib = init(config)
const MyComp = lib.myComp()

const App = () => <MyComp />

如果只与库中的单个组件相关，您可以直接将其作为道具传递：

const App = () => <MyComp myVar={process.env.MY_VAR} />

在应用程序中，您可以例如创建一个包装组件MyAppComp，该组件已经包含其配置，以避免MyComp 的冗余初始化逻辑。这里的另一个好处是，如果库公共 API 发生变化，您只需在应用程序中的一个位置更改代码。

MyAppComp.js 在应用项目中：

import { MyComp } from "my-comp-library"

export const MyAppComp = props => <MyComp myVar={process.env.MY_VAR} {...props} />

应用程序和组件项目的独立构建管理消除了耦合，从而使它们更易于维护。

【讨论】：

是的，这是一个不错的选择，而且似乎是一个非常干净的解决方案。您将如何在我的导入应用程序中跨多个屏幕处理此操作？好像我会做很多初始化。有什么建议吗？
我喜欢这个。我非常喜欢它：D 不错
酷（-: ，很高兴它有帮助。
是的。谢谢你:)

【解决方案2】：

如果您通过 create-react-app 创建项目，那么您可以使用 env-cmd npm 包。

如果您有 webpack，那么您也可以使用 dotenv 包。或者，您可以使用下面的代码来定义变量。

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

【讨论】：