1. 首页
  2. 问题
  3. 如何使用React和Webpack设置Babel 6 Stage 0
小编典典

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

reactjs

我对文档的理解

我看到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'

我的问题

因此，为了将所有内容都编译得babel-loader井井有条，我在Webpack配置中添加了刚刚更新为与Babel6配合使用的内容：

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.JSON，即仅在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开始，本文中提到的所有错误均已完全修复。 如果仍有问题，请更新您的依赖关系。


阅读 293

收藏
2020-07-22

共1个答案

小编典典

我在这里遇到的两个相当严重的错误，即具有静态属性的ES6类的直接导出和ES6构造函数的问题，在该线程的答案中进行了讨论
，可以在GitHub上明确找到（导出错误），此处（构造函数错误） 。 （GitHub Issue Tracker已关闭，
问题，错误和请求已移至此处。）

这些都是官方确认的错误，自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一样工作。祝大家编码愉快。）

2020-07-22