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

发布时间：2020-12-15 06:54:01 所属栏目：百科来源：网络整理

导读：我从文档的理解我看到Babel 6现在有三个预设：es2015，反应和stage-x。我读了，我可以设置在.babelrc像这样： { "presets": ["es2015","react","stage-0"]} 或直接在package.JSON像这样： { ...,"version": x.x.x,"babel": { "presets": ["es2015","stage-

我从文档的理解

我看到Babel 6现在有三个预设：es2015，反应和stage-x。
我读了，我可以设置在.babelrc像这样：

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

或直接在package.JSON像这样：

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

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

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$/,loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders)
      },[...]

现在当我编译没有.babelrc在根或预设选项设置package.JSON，即只有在webpack配置中的babel-loader es2015预设置我得到一个意想不到的令牌错误关于静态propTypes在我的React组件类：

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我被告知这是一个阶段1的功能，即变换类的属性。所以我想立即实现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：我们不知道该做什么这个节点类型。我们以前是一个声明，但我们不能在这里？

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

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

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

>这是一个babel-loader问题，还是babel问题？
>我在哪里必须配置stage-0，使它不会
抛出错误？

更新

当使用预设集编译并使用所提到的类导出错误的解决方法(在创建它之前不能导出类??)，设置预设的顺序会更改错误消息。当我设置stage-0首先错误现在是’this’不允许之前super()(这是内部节点上的错误。可能是内部错误)
当我把stage-0第二或第三我从上面得到关于语法错误的消息。

最新

关于这些bug的最新进展see my post或the new babel issue tracker on phabricator更多。 (基本上编译固定为6.2.1，但现在还有其他事情发生)

本文中提到的所有错误都是从Babel 6.3.x完全修复的。如果您仍遇到问题，请更新您的依赖关系。

我在这里遇到的两个相当重的bug，即直接导出带有静态属性的ES6类和ES6构造函数的问题在这个线程的答案中讨论，可以在GitHub上显式地找到(导出bug)和这里(constructor bug)。 (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,PropTypes } from 'react'

class ClassName extends Component {
  static propTypes = {...}
}
export default ClassName // Just export the class after creating it

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

‘this’不允许在super()之前(这是内部节点上的错误，可能是内部错误)

尽管是一个合法的规则as pointed out by Dominic Tobias这是一个已确认的错误，其中似乎扩展类有自己的属性将抛出这个或类似的消息。至于现在我还没有看到这一个的任何解决方法。很多人回到Babel5为这个原因现在(从6.1.4)。

据说这是固定的释放Babel 6.1.18(见上面的GitHub问题)，但人，我包括，仍然看到同样的确切问题发生。

还要注意，现在，您加载babel预设stage-x，反应和es2015的顺序似乎很重要，可能会改变您的输出。

至于Babel 6.2.1

这两个bug都是固定的，代码编译得很好。但是还有另一个可能影响很多人使用反应，抛出ReferenceError：这没有被初始化 – super()没有在运行时被调用。敬请关注…

从Babel 6.3.17完全修复

(也许一两个更早，不是在6.3.x之前，这是我在的版本，一切正在工作，因为它是与Babel5。快乐编码大家。)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!