reactjs - 如何使用 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"]
  },
  ...,
}

我可以进一步将 babel-loader 与 webpack 一起使用，如下所示:

loader: 'babel?presets[]=es2015'

我的问题

因此，为了干净整洁地编译所有内容，我将刚刚更新为可与 Babel6 一起使用的 babel-loader 添加到 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或package.JSON中设置的预设选项进行编译时，即仅使用在中设置的babel-loader es2015预设在 webpack 配置中，我在 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

或者简而言之:模块构建失败:错误:/.../index.jsx:我们不知道如何处理此节点类型。我们以前是一个声明，但我们不能适应这里？

这就是我陷入困境的地方。当我能够像这样使用 babel-loader 进行编译并且一切正常时，我用 Babel5 编写了这个组件:

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

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

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

更新

使用预设集进行编译并使用上述解决方法来解决类导出错误(在创建类之前不得导出类)时，预设集的顺序会更改错误消息。当我首先设置 stage-0 时，现在的错误是 'this' is not allowed before super() (这是内部节点上的错误。可能是内部错误)当我将 stage-0 第二个或第三个放置时，我从上面收到有关语法错误的消息。

最新

有关这些错误的最新进展 see my post或the new babel issue tracker on phabricator了解更多。 (从 6.2.1 开始编译基本上已修复，但现在还发生了其他事情)

本文提到的所有错误从 Babel 6.3.x 开始已完全修复。如果仍有问题，请更新您的依赖项。

Answer 1

我在这里遇到的两个相当严重的错误，即直接导出具有静态属性的 ES6 类和 ES6 构造函数的问题在此线程的答案中进行了讨论，并且可以在 GitHub 上明确找到这里(导出错误)和这里(构造函数错误)。 (GitHub 问题跟踪器已关闭，issues, bugs and requests have moved here 。)

这些都是官方确认的错误，自 Babel 6.3.17 起修复

(也许一两个更早，而不是 6.3.x 之前，这是我使用的版本，一切都像 Babel5 一样工作。祝大家编码愉快。)

<小时/>

(仅供记录:)

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

我们不知道如何处理此节点类型。我们以前是一个声明，但我们不能适应这里？

您可能正在导出具有这样或类似方式的静态属性的 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

<小时/>

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

在 super() 之前不允许使用“this”(这是内部节点上的错误。可能是内部错误)

尽管是合法规则as pointed out by Dominic Tobias这是一个已确认的错误，具有自己属性的扩展类似乎会抛出此消息或类似的消息。就目前而言，我还没有看到任何解决此问题的方法。现在很多人都因为这个原因回滚到 Babel5(截至 6.1.4)。

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

<小时/>

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

<小时/>

从 Babel 6.2.1 开始

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

自 Babel 6.3.17 起已完全修复

(也许一两个更早，而不是 6.3.x 之前，这是我使用的版本，一切都像 Babel5 一样工作。祝大家编码愉快。)