如何使用React和Webpack设置Babel 6阶段0 [英] How to set up Babel 6 stage 0 with React and Webpack
问题描述
我从文档中理解
我看到Babel 6现在有三个预设：es2015，react和stage-x。
我读到，我可以设置那些在 .babelrc 像这样：
{
预设：[es2015，反应，stage-0]
}
或直接在package.JSON中这样：
{
...，
version：xxx，
babel：{
presets：[es2015，react，stage-0]
}，
...，
}
我可以进一步使用babel-装载器与网络包这样：
loader：'babel？presets [] = es2015'
我的问题
所以要编译一切很好，干净我正在添加 babel-loader ，它刚刚更新为与Babel6一起工作到webpack配置，如下所示：
module.exports = function（options）{
var jsLoaders = ['babel？presets [] = es2015' ]。
[...]
装载机：[
{
测试：/\.js$/，
exclude：/ node_modules /，
装载机：jsLoaders
}，
{
test：/\.jsx$/，
exclude：/ node_modules /，
loaders：options.production？ jsLoaders：['react-hot']。concat（jsLoaders）
}，
[...]
现在当我编译而不是 .babelrc 在root或预设选项中设置 package.JSON ，即只有在webpack config中设置了babel-loader es2015，我才能在React组件类中收到有关静态propTypes的意外令牌错误：
./app/components/form/index.jsx中的错误
模块构建失败：SyntaxError：/ Library / WebServer / Documents / yarsk .test / app / components / form / index.jsx：意外的标记（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 如上所述，我得到一个非常奇怪的构建失败错误：
错误在./ app / components / form / index.jsx
模块构建失败：错误：/Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx：我们不知道该怎么做节点类型。我们以前是一个声明，但我们不能适应这里？
在NodePath.insertAfter（/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/modification.js:181:13）
在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）
在PluginPass.Class（/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-调用/ lib / index.js：101：11）
在newFn（/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/visitors.js:233:27）
在NodePath._call（/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:72:18）
在NodePath.call（/ Library / WebServer / Documents / yarsk.test / node_modules / babel-traverse / lib / path / context.js：44：17）
在NodePath.visit（/Library/WebServer/Documents/yarsk.tes t / node_modules / babel-traverse / lib / path / context.js：102：12）TraversalContext.visitQueue上的
（/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context。 js：151：16）
在TraversalContext.visitSingle（/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:111:19）
在TraversalContext.visit （/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:195:19）
在Function.traverse.node（/Library/WebServer/Documents/yarsk.test/ node_modules / babel-traverse / lib / index.js：139：17）
在NodePath.visit（/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js： 106：22）
在TraversalContext.visitQueue（/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16）
在TraversalContext.visitMultiple（/ Library / WebServer / Documents / yarsk.test / node_modules / babel-traverse / lib / context.js：106：17）
在TraversalContext.visit （/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:193:19）
在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-0t
抛出错误？
更新
使用预设设置编译并使用上述解决方法进行类导出错误（必须不导出类，直到创建它之后）设置的预设的顺序会更改错误消息。当我设置 stage-0 首先，错误现在是'这个'在super（）之前是不允许的（这是一个内部节点上的错误。可能是内部错误）
当我将 stage-0 第二或第三个从上面得到有关语法错误的消息。 p>
最新
关于这些错误的进展情况查看我的帖子或更多关于phabricator的新宝贝问题追踪器。 （基本上编译固定为6.2.1，但现在还有其他事情）
本文中提到的所有错误完全固定为Babel 6.3.x.如果您仍然遇到问题，请更新您的依赖项。
我遇到的两个很重的bug即，直接导出具有静态属性的ES6类和ES6构造函数的问题在本线程的答案中讨论，并且可以在GitHub上明确地找到（export bug）和这里（构造函数bug）< /秒>。 （GitHub问题跟踪器已关闭，问题，错误和请求已移至此）
这些都是正式确认的bug，自从Babel 6.3.17
一个或两个更早，不是6.3.x之前，这是我的版本，一切都正常工作，就像Babel5一样。快乐编码大家。）
（对于记录：）
所以如果你收到以下错误消息在CLI中：
我们不知道该如何处理此节点类型。我们以前是一个声明，但我们不能适应这里？
您正在导出一个具有静态属性的ES6类或者以类似的方式（注意，这似乎没有被连接到被扩展的类，而是连接到具有静态属性的类）：
导入反应中的{Component，PropTypes}
导出默认类ClassName extends Component {
static propTypes = {。 ..}
//现在不能正确编译，因为Babel 6.1.4
}
简单的解决方法由Stryzhevskyi提及和几位GitHub上的人：
import'反应'中的{Component，PropTypes}
class ClassName extends Component {
static propTypes = {...}
}
export default ClassName //只需在创建它之后导出类
第二个问题是关于以下错误：
在super（）之前不允许这个'内部节点出错。可能是内部错误）
假设这是发布Babel 6.1.18 （见上面的GitHub问题），但是我包括的人仍然看到同样的确切问题发生。
还要注意，现在加载babel的顺序预设 stage-x ，反应和 es2015 似乎是重要的，可能会改变您的输出。
截至Babel 6.2.1
这两个错误都是固定的，代码编译正常。 但是... 还有另一个可能会影响很多反应的人，引发 ReferenceError：这还没有初始化 - super（）没有在运行时被称为。 在此引用。请继续关注...
自Babel 6.3.17
完全固定（可能一两个以前，不是6.3.x之前，这是我的版本，一切正常工作与Babel5一样。快乐编码每个人。）
My understanding from the docs
I see that Babel 6 has three presets for now: es2015, react and stage-x.
I read that I can set those in .babelrc like so:
{
"presets": ["es2015", "react", "stage-0"]
}
or directly in package.JSON like so:
{
...,
"version": x.x.x,
"babel": {
"presets": ["es2015", "react", "stage-0"]
},
...,
}
I can further use babel-loader with webpack like this:
loader: 'babel?presets[]=es2015'
My problem
So to compile everything nice and clean I'm adding babel-loader, which has just been updated to work with Babel6, to the webpack config like this:
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)
},
[...]
Now when I compile without .babelrc in root or presets options set in package.JSON, i.e. only with the babel-loader es2015 preset set in the webpack config I get an unexpected token error about static propTypes in my React component class:
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 = {
| ^
On GitHub I got told this is a stage-1 feature, namely transform-class-properties. So I would like to implement stage-0 right away.
BUT
When I do so by adding .babelrc or defining package.JSON like above I get a very weird build fail error:
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
Or in short: 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?
This is where I'm stuck. I wrote this component with Babel5 when I was able to compile with babel-loader like this and everything worked fine:
loader: 'babel?optional[]=runtime&stage=0
Now I'm getting the mentioned errors compiling.
- Is this a
babel-loaderissue, or ababelissue? - Where do I have to configure
stage-0so that it won't throw errors?
Update
When compiling with presets set and using the mentioned workaround for the class export bug (must not export class until after creating it) the order of the set presets changes the error message. When I set stage-0 first the error now is 'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)
When I put stage-0 second or third I get the message about syntax error from above.
Latest
For the latest advances regarding these bugs see my post or the new babel issue tracker on phabricator for more. (Basically compiling is fixed as of 6.2.1 but there's other things happening now)
All the bugs mentioned in this article are completely fixed as of Babel 6.3.x. Please update your dependencies if you're still having issues.
The two pretty heavy bugs I ran into here, namely the direct export of an ES6 class with a static property and a problem with the ES6 constructor are discussed in the answers of this thread and can be found on GitHub explicitly here (export bug) and here (constructor bug). (GitHub Issue Tracker has been closed and issues, bugs and requests have moved here.)
These are both officially confirmed bugs, fixed since Babel 6.3.17
(Maybe one or two earlier, not before 6.3.x, this is the version I'm on and everything is working as it was with Babel5. Happy coding everyone.)
(For the records:)
So if you get the following error message in the CLI:
We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
Chances are you are exporting an ES6 class with a static property like this or in a similar manner (note that this doesn't seem to be connected to the class being extended anymore but rather to a class having a static property):
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
}
The simple workaround as mentioned by Stryzhevskyi and several people on GitHub:
import React, { Component, PropTypes } from 'react'
class ClassName extends Component {
static propTypes = {...}
}
export default ClassName // Just export the class after creating it
The second issue is about the following error:
'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)
Despite being a legit rule as pointed out by Dominic Tobias this is a confirmed bug where it appears that extended classes having their own properties will throw this or a similar message. As for now I have not seen any workarounds for this one. Lots of people rolled back to Babel5 for this reason for now (as of 6.1.4).
Supposedly this was fixed with the release of Babel 6.1.18 (see above GitHub issue) but people, me included, still see the same exact problem happening.
Also take note that for now the order in which you load the babel presets stage-x, react and es2015 seems to be important and may change your output.
As of Babel 6.2.1
both of these bugs are fixed, code compiles fine. But... there is still another one that probably affects a lot of people working with react, that throws ReferenceError: this hasn't been initialised - super() hasn't been called at runtime. Referenced here. Stay tuned...
Completely fixed since Babel 6.3.17
(Maybe one or two earlier, not before 6.3.x, this is the version I'm on and everything is working as it was with Babel5. Happy coding everyone.)
这篇关于如何使用React和Webpack设置Babel 6阶段0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
