本文作者:IMWeb 江源 原文出处:IMWeb社区 未经同意,禁止转载
原文http://jiangyuan.me/blog/2016/08/13/babel/
最近总算有点时间能系统的梳理下 babel
。入门或者使用手册什么的直接查看“参考文章”即可,我只说说我的理解。
Babel is built out of plugins.
babel-core
只是个插件加载器,presets
是一组插件,避免繁琐地一个一个安装插件。preset
es2015 可以很好的编译 es6
,唯独对常用的 class property
无能为力,快使用插件 Class properties transform 。preset
react 也是官方支撑的,有五个插件,其中 flow 是我下一篇文章的内容。传闻 React 团队抛弃了自己做的编译工具全力支持 babel
,eslint
的 parser
主流也是 babel
,不知道 typescript
是啥态度。preset
stage-0 其实包含了 stage-1-3 ,也就是说你装了 0
,其他三个默认就装了,别重复堆叠暴露底细。另外,0-3 是代表了不同阶段,但, 0
是代表刚开始讨论,而 3
是代表快要成为标准规范了,切忌搞混,又暴露底细,虽然我也不知道 async/wait
处在哪个阶段。preset
请参考范本,其实很简单,但也别胡乱搞 preset
,生态圈的质量取决于开发者的质量。plugin
可以参考……没的参考,看样子你是个求知欲很强的人,看看这个,《Babel 插件手册》,这是另一个世界,里面有抽象语法树、词法分析、语法分析等高阶词汇,装 ◻︎ 撩 ◻︎ 必备。sourcemap
,有两个坑。- 一直很好奇,`babel` 和 `ugilfy` 两个 `sourcemap` 打架,到底怎么处理?可以读读这个 [Composed source map](https://github.com/mishoo/UglifyJS2#composed-source-map) 。
- 坑!用 `babel-cli` 的话,配置 `.babelrc` 里面的 `sourceMaps` 不会生成 `map` 文件,你必须在命令行里指定 `--source-map` ,因为写 `sourceMap` 的操作是在 `babel-cli` 里实现的,虽然生成 `sourceMap` 是在 `babel-core` 里。moduleXXX,比如
/xx/xx/xx.js
绝对路径作为 filename
传到 babel
里,结果 babel
找不到 .babelrc
。babel
是沿着目录往上查找 .babelrc
,直到根目录,这种形式最后的结果是 /.babelrc
,it's not a file ....log
系统真的很弱。Class
的语法糖,代码严重冗余!我担心的别人当然也会担心,看看这个 babel-runtime 。虽说有官方的方案,但这块还是值得挖掘,是个微创新的点。fis
生态圈也是江河日下,babel
的问题都不能妥善解决。 建议使用这个包 parser-imweb ,将这个包和 babel
相关的包都装在本地吧,否则会掉到坑里。 也许是时候换到 webpack
?