记录一下日常在Babel中踩的坑
Babel 6.X 不能转码export default
有个文件通过export default导出, 在其他地方用解构赋值import,却发现失败了:
将此文件单独转码,如下图:
之前一直好奇babel是怎样将es6模块转成commonJS的,因为它俩在包括加载(es6是静态解析,commonJS是运行时解析)方面不可能通过转码解决.不过一直没有仔细研究过babel的源码.
今天从这个例子来看,babel并未将export default解析为commonJS的形式, 而是按ES6模块的标准直接将export default解析成了export.default, 因此解构赋值只能取到default
变量, 取其他变量自然就出错了.
至于解决办法, babel5支持export default转码,因此可能存在插件形式的对应转码器, 不过这种转码转出来的并不是es6模块的形式,只是自我安慰, 因此我还是选择用module.exports 或者 exports将变量导出了
因此, 使用babel 6.x时, 在要导入某模块中的一个变量时,最好不要在导出文件中使用export default, 除非你配好了插件
当然, 不使用解构赋值而是直接导入模块的全部,例如import * as XX from "XX"
, export default是一点问题都没有的
不写分号+紧跟自执行函数=报错
用Eslint习惯不写分号, 以为只要保证return语句后面有分号就行了,没想到Babel转码时会踩这种坑
如下,原本代码不带分号, 后面紧跟的是async自执行函数
于是运行报错
单独Build出来看看,果然是分号的问题导致未换行,Babel使用了(0,function)
来保持全局this引用,然而没加分号导致(0,function)
直接被当作函数调用的参数了
再试试添加分号
如下图,这次没问题了
Babel 6.X 不支持Decorator
Decorator(修饰器)是设计模式的一种, 用来在面向对象编程中的编译时期更改类的属性和行为
自从主写JavaScript之后, 很久都没用过Decorator了, ES6支持Decorator, 今天尝试用了一下, 没想到Babel直接报了如下的错误
Decorators are not supported yet in 6.x pending proposal update.
查询了一下官方文档, 发现Decorators在Babel 6.X中被取消支持了
非官方的有个能支持Decorator的库,但是果然我已经不想再为修饰器折腾了, 毕竟大二我写Java的时候用得并不爽