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，因此babel中的package.json字段与您在.babelrc中使用该配置的情况相同。 Babel验证所有选项，但没有VARIABLE选项（full list of options）。

Babel的env选项允许您为不同的环境（NODE_ENV或BABEL_ENV）使用不同的预设/插件，因为没有更好的方法根据环境中的环境有条件地定义选项一个JSON文件。在babel 7中，您将能够使用JavaScript文件（.babelrc.js），它为您提供了JavaScript的全部功能，可以有条件地定义和组合任何选项（包括检查环境变量）。

如果要将环境变量用于自定义配置，则必须自己处理它们。您是否使用.env文件或手动指定环境变量取决于您。

如何将环境变量添加到package.json

1 个答案: