如何使用 React 和 Webpack 设置 Babel 6 stage 0

Question

我对文档的理解

我看到 Babel 6 目前有 3 个预设：es2015、react 和 stage-x。我读到我可以像这样在 .babelrc 中设置它们：

{
  "presets": ["es2015", "react", "stage-0"]
}

或直接在 package.JSON 中，像这样：

{
  ...,
  "version": x.x.x,
  "babel": {
    "presets": ["es2015", "react", "stage-0"]
  },
  ...,
}

我可以像这样将 babel-loader 与 webpack 一起使用：

loader: 'babel?presets[]=es2015'

我的问题

所以为了编译一切干净整洁的东西，我添加了 babel-loader，它刚刚被更新为可以与 Babel6 一起工作，像这样的 webpack 配置：

module.exports = function(options) {
  var jsLoaders = ['babel?presets[]=es2015'];
  [...]
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: jsLoaders
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders)
      },
      [...]

现在，当我在 root 中编译 without .babelrc 或在 package.JSON 中设置预设选项时，即仅在 webpack 配置中设置 babel-loader es2015 预设时，我得到一个关于我的 React 组件中静态 propTypes 的意外标记错误 class:

ERROR in ./app/components/form/index.jsx
Module build failed: SyntaxError: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: Unexpected token (19:19)
  17 | // ES6 React Component:
  18 | export default class SurveyForm extends Component {
> 19 |   static propTypes = {
     |                    ^

在 GitHub 我被告知这是一个 stage-1 功能，即 transform-class-properties。所以我想立即实施 stage-0 。
但是
当我像上面那样添加 .babelrc 或定义 package.JSON 时，我得到一个非常奇怪的构建失败错误：

ERROR in ./app/components/form/index.jsx
Module build failed: Error: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
    at NodePath.insertAfter (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/modification.js:181:13)
    at NodePath.replaceWithMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/replacement.js:92:8)
    at handleClassWithSuper (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:80:10)
    at PluginPass.Class (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:101:11)
    at newFn (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/visitors.js:233:27)
    at NodePath._call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:72:18)
    at NodePath.call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:44:17)
    at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:102:12)
    at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
    at TraversalContext.visitSingle (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:111:19)
    at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:195:19)
    at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
    at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:106:22)
    at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
    at TraversalContext.visitMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:106:17)
    at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:193:19)
    at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
 @ ./app/index.jsx 9:0-28

或者简而言之：Module build failed: Error: /.../index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

这就是我卡住的地方。 当我能够像这样使用 babel-loader 编译并且一切正常时，我用 Babel5 编写了这个组件：

loader: 'babel?optional[]=runtime&stage=0

现在我在编译时遇到上述错误。

这是 babel-loader 问题还是 babel 问题？
我必须在哪里配置 stage-0 这样它就不会抛出错误？

更新

当使用预设集编译并使用提到的 class 导出错误的解决方法（必须在创建它之前不能导出 class）时，预设集的顺序会更改错误消息。当我先设置 stage-0 时，现在的错误是 'this' is not allowed before super() (This is an error on an internal node. Probably an internal error) 当我将 stage-0 放在第二个或第三个时，我从上面收到有关语法错误的消息。

这些都是官方确认的错误，从 Babel 6.3.17 开始修复

（可能早一两个，不会早于 6。3.x，这是我正在使用的版本，一切都像 Babel5 一样工作。祝大家编码愉快。）

（备案：）

因此，如果您在 CLI 中收到以下错误消息：

We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

您可能正在导出带有静态属性的 ES6 class 或类似方式 （请注意，这似乎与class 不再扩展，而是扩展为具有静态属性):

的 class

import React, { Component, PropTypes } from 'react'

export default class ClassName extends Component {
  static propTypes = {...}
  // This will not get compiled correctly for now, as of Babel 6.1.4
}

简单的解决方法和 GitHub 上的一些人：

import React, { Component, PropTypes } from 'react'

class ClassName extends Component {
  static propTypes = {...}
}
export default ClassName // Just export the class after creating it

第二个问题是关于以下错误：

'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)

尽管是合法规则这是一个已确认的错误，似乎具有自己属性的扩展 classes 会抛出此消息或类似消息。至于现在，我还没有看到任何解决方法。由于这个原因（从 6.1.4 开始），很多人暂时回滚到 Babel5。

据说 Babel 6.1.18 的发布解决了这个问题 ~~（见上文 GitHub 问题）~~ 但是人们，包括我在内，仍然看到同样的问题发生.

另请注意，目前您加载 babel 预设 stage-x、react 和 es2015 的顺序似乎很重要，可能会改变您的输出。

从 Babel 6.2.1 开始

这两个错误都已修复，代码编译正常。 但是... 还有一个问题可能会影响很多使用 React 的人，它会在运行时抛出 ReferenceError: this hasn't been initialised - super() hasn't been called。 Referenced here。敬请关注...

自 Babel 6.3.17 以来已完全修复

（可能早一两个，不会早于 6。3.x，这是我正在使用的版本，一切都像 Babel5 一样工作。祝大家编码愉快。）

Answer 5

您试过只使用 stage-1 吗？

使用查询属性对我有用。

```
module: {
  loaders: [{
    test: /\.jsx?$/, 
    loader: 'babel',
    query: {
      presets: ['es2015', 'stage-1', 'react']
    }
  }]
}
```

当然，我还没能在package.json中使用.babelrc和babel选项。仍在努力弄清楚 babel-*v6.0

Answer 6

Here 是一个使用 Babel 6、React、Webpack 和 Sequelize 的工作示例：

https://github.com/BerndWessels/react-webpack

基本上就是.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "env": {
    "development": {
      "plugins": [
        "babel-relay-plugin-loader",
        [
          "react-transform",
          {
            "transforms": [
              {
                "transform": "react-transform-hmr",
                "imports": [
                  "react"
                ],
                "locals": [
                  "module"
                ]
              },
              {
                "transform": "react-transform-catch-errors",
                "imports": [
                  "react",
                  "redbox-react"
                ]
              }
            ]
          }
        ]
      ]
    },
    "production": {
      "plugins": [
        "babel-relay-plugin-loader"
      ]
    }
  }
}

这些是模块版本

babel-core@6.3.17
babel-loader@6.2.0
babel-plugin-react-transform@2.0.0-beta1
babel-preset-es2015@6.3.13
babel-preset-react@6.3.13
babel-preset-stage-0@6.3.13

这对我有用。

如何使用 React 和 Webpack 设置 Babel 6 stage 0

How to set up Babel 6 stage 0 with React and Webpack

config

ecmascript-6

reactjs

webpack

babeljs

我对文档的理解

我的问题

更新

最新

这些都是官方确认的错误，从 Babel 6.3.17 开始修复

从 Babel 6.2.1 开始

自 Babel 6.3.17 以来已完全修复