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

Question

我从文档中了解到的

我看到Babel 6现在有三个预设:es2015,react和stage-x.我读到我可以这样设置.babelrc:

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

或直接在package.JSON中如下:

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

我可以进一步使用带有webpack的babel-loader,如下所示:

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)
      },
      [...]

现在,当我在没有 .babelrc设置root或package.JSONpresets 选项的情况下进行编译时,即仅使用webpack配置中的babel-loader es2015预设集时,我的React组件类中出现了关于静态propTypes的意外标记错误:

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以便它不会抛出错误？

更新

当使用预设集进行编译并使用上面提到的类导出错误的解决方法时(在创建之前不能导出类​​),设置预设的顺序会更改错误消息.当我stage-0首先设置错误时,现在是'this' is not allowed before super() (This is an error on an internal node. Probably an internal error) 当我放入stage-0第二个或第三个时,我从上面得到关于语法错误的消息.

最新

有关这些错误的最新进展,请参阅我的帖子或phabricator上的新babel问题跟踪器了解更多信息.(基本编译从6.2.1开始修复,但现在还有其他事情发生)

从Babel 6.3.x开始,本文中提到的所有错误都是完全修复的.如果您仍然遇到问题,请更新您的依赖项.

Answer 1

我遇到的两个相当重的错误,即直接导出带有静态属性的ES6类和ES6构造函数的问题,在这个线程的答案中讨论,可以在GitHub上明确地找到(导出bug)和这里(构造函数bug).(GitHub问题跟踪器已关闭,问题,错误和请求已移至此处.)

这些都是官方证实的错误,自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类(请注意,这似乎不再与正在扩展的类相关联,而是与具有静态属性的类相关联):

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
}

Stryzhevskyi和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)

尽管Dominic Tobias指出这是一个合法的规则,但这是一个确认的错误,它看起来具有自己属性的扩展类会抛出这个或类似的消息.至于现在,我还没有看到任何解决方法.由于这个原因,很多人现在回到Babel5(截至6.1.4).

据说随着Babel 6.1.18的发布而修复了这个问题(参见上面的GitHub问题)但是包括我在内的人们仍然看到了同样的问题.

还需要注意的是,现在在你加载预设通天塔的顺序stage-x,react并且es2015似乎是重要的,可能会改变你的输出.

截至Babel 6.2.1

这两个错误都是固定的,代码编译得很好.但是......还有一个可能会影响很多使用react的人,这会ReferenceError: this hasn't been initialised - super() hasn't been called在运行时抛出.在这里引用.敬请关注...

自Babel 6.3.17起完全修复

(可能早一两个,不是在6.3.x之前,这是我正在使用的版本,一切都像Babel5一样有效.快乐编码所有人.)

Answer 2

尝试用这样的结构替换您的导出:

class SurveyForm extends Component {/*implementation*/}
export default SurveyForm