Question

我对文档的理解

我看到Babel 6现在有三个预设：es2015，react和stage-x。我读到我可以像<random>那样设置那些：

.babelrc

或直接在package.JSON中如下：

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

我可以进一步使用像这样的webpack的babel-loader：

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

我的问题

所以要编译好的和干净的东西我将刚刚更新为Babel6的loader: 'babel?presets[]=es2015'添加到webpack配置中，如下所示：

babel-loader

现在当我在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或presets选项中编译没有 .babelrc时，即仅在webpack配置中使用babel-loader es2015预设集时，我收到意外的令牌错误关于我的React组件类中的静态propTypes：

package.JSON

在GitHub上，我被告知这是一个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 = { | ^功能，即stage-1。所以我想马上实施transform-class-properties。
的 BUT
当我通过添加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

这就是我被困的地方。我用Babel5编写了这个组件，当我能用这样的babel-loader编译时，一切正常：

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?

现在我正在编写上述错误。

这是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)置于第二或第三位时，我从上面收到有关语法错误的消息。

这些都是官方证实的错误，自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
}

简单的解决方法as mentioned by 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)

尽管是一个合法的规则as pointed out by Dominic Tobias，但这是一个确认的错误，看来具有自己属性的扩展类会抛出此消息或类似的消息。至于现在，我还没有看到任何解决方法。由于这个原因，很多人现在回归Babel5（截至6.1.4）。

据说这是通过发布Babel 6.1.18 ~~（见上面的GitHub问题）~~来解决的，但包括我在内的人仍然看到同样的问题。

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

截至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 2

尝试用这种结构替换你的导出：

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

Answer 3

在遇到相同的问题后，我能够使用下面的WebPack配置使用React。

module.exports = {
  entry: './app/Index.js',
  output: { path: __dirname, filename: 'dist/bundle.js' },
  module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel',
            query: {
                presets: ['react']
            }
        }
    ]
  }
};

我也需要安装babel-preset-react。

npm install --save-dev babel-preset-react

编辑：当然，如果你也在编写ES6，你可能还需要包括ES2015预设。

可以在此处找到Babel Presets：https://github.com/babel/babel/tree/development/packages

Answer 4

你试过吗？：

presets: [{
    plugins: [
        'transform-class-properties'
    ]
}, 'stage-0', 'es2015', 'react']

Answer 5

您是否尝试过使用stage-1？

使用查询属性为我工作。

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

当然，我无法在.babelrc中使用package.json和babel选项。仍在试图找出babel-*v6.0

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

我对文档的理解

我的问题

更新

最新

5 个答案:

这些都是官方证实的错误，自Babel 6.3.17

截至Babel 6.2.1

自Babel 6.3.17以来完全修复