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

我从文档的理解

我看到Babel 6现在有三个预置:es2015,反应和stage-x。 我读过,我可以像这样在.babelrc设置它们:

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

或者直接在package.JSON中如下所示:

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

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

 loader: 'babel?presets[]=es2015' 

我的问题

所以要编译一切很好,干净我添加babel-loader ,刚刚更新与Babel6一起工作,到这样的webpackconfiguration:

 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 ,即只有在webpackconfiguration中设置babel加载器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上,我被告知这是一个stage-1function,即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? 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?

这是我卡住的地方。 我用Babel5编写了这个组件,当我用babel-loader这样编译时,一切正常。

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

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

  • 这是一个babel-loader问题,还是一个babel问题?
  • 我在哪里必须configurationstage-0以便它不会抛出错误?

更新

使用预设集编译并使用上述类导出错误的解决方法(创build之前不得导出类)时,预设集的顺序会更改错误消息。 当我第一次设置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,但现在还有其他的事情发生)

所有在这篇文章中提到的bug在Babel 6.3.x中都是完全固定的。 如果您仍然有问题,请更新您的依赖关系。

我在这里遇到的两个相当重的bug,即ES6类的静态属性和ES6构造函数的直接导出,在这个线程的答案中讨论,可以在GitHub中明确地find(导出bug)和这里(构造错误)(GitHub问题跟踪器已经closures, 问题,错误和请求已经移到这里 。)

这些都是官方确认的错误,从Babel6.3.17开始就修复了

(也许前面一两个,不在6.3.x之前,这是我正在使用的版本,所有的东西都和Babel5一样,所有人都快乐的编码)


(为了logging:)

所以如果你在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)

尽pipe多米尼克·托比亚斯(Dominic Tobias)指出这是一个合法的规则,但这是一个确认的错误,看起来扩展类具有自己的属性会抛出这个或类似的信息。 至于现在我还没有看到这个的任何解决方法。 由于这个原因,很多人现在回滚到Babel5(从6.1.4开始)。

据推测,随着Babel6.1.18的发布(见上面的GitHub问题) ,这个问题已经解决了,但是包括我在内的人仍然看到了同样的问题。


另外请注意,现在您加载babel预设stage-x的顺序, reactes2015似乎很重要,可能会改变您的输出。


从Babel 6.2.1开始

这两个错误都是固定的 ,代码编译得很好。 但是…还有一个可能会影响很多人处理反应的事件,这会引发ReferenceError: this hasn't been initialised - super() hasn't been called在运行时ReferenceError: this hasn't been initialised - super() hasn't been called 。 在这里引用 。 敬请关注…

自从Babel 6.3.17完全修复

(也许前面一两个,不在6.3.x之前,这是我正在使用的版本,所有的东西都和Babel5一样,所有人都快乐的编码)

尝试用这种结构replace你的出口:

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

这里有一个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 

这对我行得通。

在遇到同样的问题之后,我可以使用下面的WebPackconfiguration来使用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预设可以在这里find: https : //github.com/babel/babel/tree/development/packages

你有没有尝试过?:

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

你有没有尝试过使用stage-1

使用查询属性为我工作。

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

当然,我还没有能够在package.json使用.babelrc和babel选项。 仍然试图找出babel-*v6.0