记录一下日常在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的时候用得并不爽