我看到Babel 6目前具有三个预设:es2015,react和stage-x。我读到可以这样设置.babelrc
:
{
"presets": ["es2015", "react", "stage-0"]
}
或直接在package.JSON中,如下所示:
{
...,
"version": x.x.x,
"babel": {
"presets": ["es2015", "react", "stage-0"]
},
...,
}
我可以进一步将babel-loader与webpack结合使用,如下所示:
loader: 'babel?presets[]=es2015'
因此,为了将所有内容都编译得babel-loader
井井有条,我在Webpack配置中添加了刚刚更新为与Babel6配合使用的内容:
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
使用root或预置选项进行编译时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
,我得到一个很奇怪的构建失败错误:
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?
这就是我卡住的地方。当我能够像这样用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
第二或第三时,我从上方得到有关语法错误的消息。
有关这些错误的最新进展,请参阅我的文章或phabricator上的新babel问题跟踪器以获取更多信息。(从6.2.1开始,基本编译是固定的,但是现在还发生了其他事情)
从Babel 6.3.x开始,本文中提到的所有错误均已完全修复。如果仍有问题,请更新您的依赖关系。
我在这里遇到的两个很严重的错误,即具有静态属性的ES6类的直接导出和ES6构造函数的问题,在此线程的答案中进行了讨论,可以在GitHub上明确找到(导出错误),此处(构造函数错误)。(GitHub Issue Tracker已关闭,问题,错误和请求已移至此处。)
(也许早一两个,而不是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问题),但是包括我在内的人们仍然看到同样的问题正在发生。
还需要注意,现在在您加载预设通天塔的顺序stage-x
,react
并且es2015
似乎是重要的,可能会改变你的输出。
这两个错误都是固定的,代码可以正常编译。但是...还有另一种可能会影响很多使用React的人,它们会ReferenceError: this hasn't been initialised - super() hasn't been called
在运行时抛出。这里引用。敬请关注...
(也许早一两个,而不是6.3.x之前的版本,这是我正在使用的版本,并且一切都与Babel5一样工作。祝大家编码愉快。)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句