1

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

process.env.MY_VAR;

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

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

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

4

2 回答 2

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

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

于 2019-08-30T09:36:21.253 回答
0

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

如果你有 webpack，那么你也可以使用dotenv包。以另一种方式，您可以使用下面的代码来定义变量。

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
于 2019-08-30T09:35:59.260 回答