不同的Babel环境配置

Question

这个答案似乎已经过时了。

当前依赖项

babel: ^6.5.2
babel-core: ^6.10.4
babel-loader: ^7.0.0-beta.1
webpack: ^2.3.2
webpack-dev-server: ^2.4.2

npm脚本

// points to specific dev configuration
"serve": NODE_ENV=development webpack-dev-server --hot --config ./webpack/development.js

我正在使用的webpack配置

.babelrc

{
  "env": {

    "development": {
      "presets": [
        "es2015",
        "stage-0",
        "react",
        "react-hmre"
      ],
      "plugins": [
        "babel-plugin-root-import",
        "react-html-attrs",
        "transform-es2015-destructuring",
        "transform-object-rest-spread",
        "syntax-object-rest-spread"
      ]
    },

    "production": ...
    "test": ...
  }
}

Babel文档建议使用上述的.babelrcenv配置，并提到要使用这个特定的presets配置 -- 然而，使用上述配置时，babel-loader会抛出以下错误：

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

如何编写正确的.babelrc文件以使不同的环境正常工作？

- Daniel Lizik

Answer 1

presets 键的正确语法是一个列表嵌套列表，根据错误信息。如果您将代码改正为以下内容，则应该可以工作：

{
  "env": {
    "development": {
      "presets": [
        "es2015",
        "stage-0",
        "react",
        "react-hmre"
      ],
      "plugins": [
        "babel-plugin-root-import",
        "react-html-attrs",
        "transform-es2015-destructuring",
        "transform-object-rest-spread",
        "syntax-object-rest-spread"
      ]
    },
    "production": ...
    "test": ...
  }
}

- Justin Hammond