1

構成用のローカル環境変数がいくつかある Create React Project があります。環境変数を使用して構成するコンポーネントがあります。を使用して変数をインポートします

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

ライブラリ内の単一のコンポーネントにのみ関連する場合は、それを props として直接渡すことができます。

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

MyAppCompアプリでは、たとえば、冗長な初期化ロジックを回避するために、構成が既に含まれているラッパー コンポーネントを作成できますMyComp。ここでの追加の利点は、ライブラリのパブリック API が変更された場合に、アプリ内でコードを変更する場所が 1 つだけになることです。

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 に答える