如何將環境變量添加到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

此配置僅用於babel，因此package.json的babel字段與您在.babelrc使用該配置.babelrc 。 Babel會驗證所有選項，並且不包含VARIABLE選項（選項的完整列表 ）。

Babel的env選項允許您針對不同的環境（ NODE_ENV或BABEL_ENV ）使用不同的預設/插件，因為沒有更好的方法根據JSON文件中的環境有條件地定義選項。 在babel 7中，您將可以使用JavaScript文件（ .babelrc.js ），該文件具有JavaScript的全部功能，可以有條件地定義和組合任何選項（包括檢查環境變量）。

如果要將環境變量用於自定義配置，則必須自己處理它們。 是否使用.env文件還是手動指定環境變量取決於您。