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

Question

我看到巴别塔6现在有三个预设：es2015，反应和阶段x。我读到我可以在. babelrc中设置这些：

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

或者直接包装。像这样：

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

我可以将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在根或预设选项设置在包。JSON，即只有在webpack配置中设置了Babel-loader es2015预设的情况下，我才会在React组件类中得到一个关于静态proTypes的意外令牌错误：

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上，我被告知这是一个第一阶段的特性，即转换类属性。所以我想马上实现第0阶段。
但是
当我通过添加. babelrc或定义包这样做时。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

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

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

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

现在我正在编译提到的错误。

• 这是Babel-loader问题，还是Babel问题？
• 我必须在哪里配置阶段0，以便它不会抛出错误？




当使用预设集进行编译并使用针对类导出错误的上述解决方法时（在创建类之前不得导出类），预设集的顺序会更改错误消息。当我首先设置stage-0时，现在的错误是'this'在super（）之前是不允许的（这是内部节点上的错误。可能是内部错误）当我放置stage-0第二次或第三次时，我从上面得到关于语法错误的消息。




有关这些错误的最新进展，请参阅我的帖子或新的巴别塔问题跟踪器。基本上编译是固定的6.2.1，但现在还有其他事情发生）

从Babel6.3开始，本文中提到的所有bug都已完全修复。x、 如果仍有问题，请更新依赖项。




Answer 1

以下是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

这对我很有用。

Answer 2

尝试用这样的结构替换您的出口：

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

Answer 3

我在这里遇到的两个非常严重的错误，即带有静态属性的ES6类的直接导出和ES6构造函数的问题，在这个线程的答案中讨论过，可以在GitHub上显式地找到（导出错误）这里（构造函数错误）。（GitHub问题跟踪器已关闭，问题、错误和请求已移至此处。）

（也许一两个更早，不是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
}

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'是不允许的超级（）（这是一个内部节点上的错误。可能是内部错误）

尽管这是Dominic Tobias指出的一条合法规则，但这是一个已确认的错误，在该错误中，具有自己属性的扩展类似乎会抛出此消息或类似消息。到目前为止，我还没有看到这方面的任何解决办法。出于这个原因，现在很多人回到了Babel5（从6.1.4开始）。

据推测，巴别塔6.1的发布解决了这一问题。18 （参见上面的GitHub问题） 但是人们，包括我在内，仍然看到同样的问题发生

还要注意，目前，加载巴贝尔预设的顺序似乎很重要，可能会改变输出

这两个错误都已修复，代码编译良好。但是还有一个可能会影响到很多使用react的人，它抛出了ReferenceError：这还没有初始化-super（）没有在运行时被调用。此处引用。请继续关注


（也许一两个更早，不是6.3. x之前，这是我正在使用的版本，一切都和Babel5一样工作。快乐编码大家。）