package.jsonに環境変数を追加する方法

Question

私はReact Boilerplateを使用していて、自分のサーバが開発、ステージング、またはプロダクションであったかどうかを示すためにルートに別途.envを持っていました。しかし、私のセットアップでは、それが最善のルートではないことに気付きました。その後、私はpackage.jsonに実際に、以下に示す生産のための環境変数を、示したコードのブロックがあることを学びました。ここから

"babel": { 
    "env": { 
     "production": { 
      "only": [ 
       "app" 
      ], 
      "plugins": [ 
       "transform-react-remove-prop-types", 
       "transform-react-constant-elements", 
       "transform-react-inline-elements" 
      ] 
     }, 
     "test": { 
      "plugins": [ 
       "transform-es2015-modules-commonjs", 
       "dynamic-import-node" 
      ] 
     } 
    } 
} 

は、私が開発し、ステージングを追加したいと思いますが、私はWebPACKのエラーを取得しておきますそれは

Unknown option: C:\folders\blah\project\package.json.development.VARIABLE. 
A common cause of this error is the presence of a configuration options 
object without the corresponding preset name. Example: 

Invalid: { presets: [{option: value}] } 
Valid: { presets: [['presetName', {option: value}]] } 

を言うと、私のほかは

"development": { 
    "VARIABLE": "value" 
} 

任意のアイデアのようなものですか？

Answer 1

この設定は純粋にバベルのため、package.jsonのbabelフィールドであり、.babelrcでその設定を使用した場合と同じです。 Babelはすべてのオプションを確認し、VARIABLEオプション（full list of options）を持っていません。条件付きでJSONファイル内の環境に基づいてオプションを定義するための良い方法はありませんので

バベルのenvオプションは、あなたが異なる環境（NODE_ENVまたはBABEL_ENV）のための異なるプリセット/プラグインを使用することができます。 babel 7では、環境変数のチェックを含む任意のオプションを条件付きで定義して構成するJavaScriptの機能をすべて備えたJavaScriptファイル（.babelrc.js）を使用できます。

カスタム構成に環境変数を使用する場合は、それらを自分で処理する必要があります。 .envファイルを使用するか、環境変数を手動で指定するかは、あなた次第です。