我看到Babel 6现在有三个预设:es2015,反应和stage-x。
我读了,我可以设置在.babelrc像这样:
{ "presets": ["es2015","react","stage-0"] }
或直接在package.JSON像这样:
{ ...,"version": x.x.x,"babel": { "presets": ["es2015","stage-0"] },...,}
我可以进一步使用babel-loader与webpack这样:
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$/,loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders) },[...]
现在当我编译没有.babelrc在根或预设选项设置package.JSON,即只有在webpack配置中的babel-loader 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我被告知这是一个阶段1的功能,即变换类的属性。所以我想立即实现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
或者简而言之:模块构建失败:错误:/…/index.jsx:我们不知道该做什么这个节点类型。我们以前是一个声明,但我们不能在这里?
这是我被困住的地方。我用Babel5编写这个组件,当我能够像这样用babel-loader编译时,一切工作正常:
loader: 'babel?optional[]=runtime&stage=0
现在我得到提到的错误编译。
>这是一个babel-loader问题,还是babel问题?
>我在哪里必须配置stage-0,使它不会
抛出错误?
更新
当使用预设集编译并使用所提到的类导出错误的解决方法(在创建它之前不能导出类),设置预设的顺序会更改错误消息。当我设置stage-0首先错误现在是’this’不允许之前super()(这是内部节点上的错误。可能是内部错误)
当我把stage-0第二或第三我从上面得到关于语法错误的消息。
最新
关于这些bug的最新进展see my post或the new babel issue tracker on phabricator更多。 (基本上编译固定为6.2.1,但现在还有其他事情发生)
本文中提到的所有错误都是从Babel 6.3.x完全修复的。如果您仍遇到问题,请更新您的依赖关系。