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

Question

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

导入变量

process.env.MY_VAR;

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

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

有什么办法可以做我想做的事。

Answer 1

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

If you have webpack then you can use dotenv 包。或者，您可以使用以下代码来定义变量。

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

Answer 2

如何将您的组件库视为已经构建 fully/independent 构建变量并准备好供 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 />

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

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

在应用程序中，您可以例如创建一个已经包含其配置的包装器组件 MyAppComp，以避免 MyComp 的冗余初始化逻辑。这里的额外好处是，如果库 public API 发生变化，您将在应用程序中只有一个地方可以更改代码。

MyAppComp.js 在应用项目中：

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

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

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

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

React Component env variables from project for imported component

npm

reactjs

npm-package