如何使用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问题？ - 我在哪里必须configuration
stage-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的顺序， react和es2015似乎很重要，可能会改变您的输出。
从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
