如何使用React和Webpack设置Babel 6阶段0
我从文档中了解
我看到Babel 6现在有三个预设：es2015，react和stage-x。 我读过，我可以像这样在.babelrc设置它们：
{
"presets": ["es2015", "react", "stage-0"]
}
或直接在package.JSON中如下所示：
{
...,
"version": x.x.x,
"babel": {
"presets": ["es2015", "react", "stage-0"]
},
...,
}
我可以进一步使用webpack这样的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的根或预设选项设置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获得一个非常奇怪的.babelrc失败错误时：
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?
这是我卡住的地方。 当我用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秒或者第三stage-0 ，从上面的语法错误。
最新
有关这些错误的最新进展，请参阅我的博文或phabricator上的新babel问题跟踪器以了解更多信息。 （基本上编译固定为6.2.1，但现在还有其他事情发生）
本文中提到的所有错误都是在Babel 6.3.x中完全修复的。 如果您仍然遇到问题，请更新您的依赖关系。
我在这里遇到的两个相当严重的错误，即直接导出ES6类的静态属性和ES6构造函数的问题在本主题的答案中讨论，可以在此处明确地找到GitHub（导出错误）和这里（构造函数错误）。 （GitHub问题跟踪器已关闭，问题，错误和请求已移至此处。）
这些都是官方确认的错误，自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问题），这个问题已得到解决，但包括我在内的人仍然看到同样的问题发生。
另外请注意，现在您加载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一样工作，所有人都快乐地编码。）
尝试用这样的结构替换你的出口：
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
这对我行得通。
链接地址: http://www.djcxy.com/p/32941.html