Question

我有一个Create React Project，其中包含一些用于配置的本地env变量。我有一个使用env变量进行自我配置的组件。它使用

导入变量

process.env.MY_VAR;

我想将组件移到npm软件包中，但保留使用process.env.MY_VAR的功能。当我构建并发布该程序包时，它将使用当前的MY_VAR而不是我要导入到我的项目中的MY_VAR来构建它。有什么办法可以做我所追求的。

我已经考虑过重构组件以将env vars作为道具，但这不是我真正想要做的事情。

有没有办法可以做我想要做的事情。

Answer 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} />

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

Answer 2

如果您通过create-react-app创建了项目，则可以使用env-cmd npm软件包。

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

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

对导入组件的项目反应组件环境变量

2 个答案: