babel
原文http://jiangyuan.me/blog/2016/08/13/babel/
最近总算有点时间能系统的梳理下 babel
。入门或者使用手册什么的直接查看“”即可，我只说说我的理解。
插件
Babel is built out of plugins.
-
babel-core只是个插件加载器，presets是一组插件，避免繁琐地一个一个安装插件。 -
presetes2015 可以很好的编译es6，唯独对常用的class property无能为力，快使用插件 Class properties transform 。 -
presetreact 也是官方支撑的，有五个插件，其中 flow 是我下一篇文章的内容。传闻 React 团队抛弃了自己做的编译工具全力支持babel，eslint的parser主流也是babel，不知道typescript是啥态度。 -
presetstage-0 其实包含了 stage-[1-3] ，也就是说你装了0，其他三个默认就装了，别重复堆叠暴露底细。另外，[0-3] 是代表了不同阶段，但，0是代表刚开始讨论，而3是代表快要成为标准规范了，切忌搞混，又暴露底细，虽然我也不知道async/wait处在哪个阶段。 -
自定义
preset请参考 范本 ，其实很简单，但也别胡乱搞preset，生态圈的质量取决于开发者的质量。 -
自定义
plugin可以参考……没的参考，看样子你是个求知欲很强的人，看看这个，《 Babel 插件手册 》，这是另一个世界，里面有抽象语法树、词法分析、语法分析等高阶词汇，装 ◻︎ 撩 ◻︎ 必备。
配置
-
sourceMaps ，单独说说
sourcemap，有两个坑。-
一直很好奇，
babel和ugilfy两个sourcemap打架，到底怎么处理？可以读读这个 Composed source map 。 -
坑！用
babel-cli的话，配置.babelrc里面的sourceMaps不会生成map文件，你必须在命令行里指定--source-map，因为写sourceMap的操作是在babel-cli里实现的，虽然生成sourceMap是在babel-core里。
-
一直很好奇，
-
moduleXXX，比如
moduleRoot等，这一系列参数要配合 transform-es2015-modules-amd 。当然，实际项目中类似的事情可以交给其他工具去做，babel就保持单纯的parser作用。 -
filename ，就是要编译文件的路径，说这个目的是源于 fis-parser-babel-5.x 。它是以这种
/xx/xx/xx.js绝对路径作为filename传到babel里，结果babel找不到.babelrc。babel是沿着目录往上查找.babelrc，直到根目录，这种形式最后的结果是/.babelrc，it's not a file .... -
quiet ，不打印任何东西。这个设计很费解，默认是打印东西，但只有错误信息，编译流程的关键节点一个没有，
log系统真的很弱。
生成的代码
- babel-polyfill ，就是个库，自己去看就好了。
-
一直担心的是几乎每个文件里面都有
Class的语法糖，代码严重冗余！我担心的别人当然也会担心，看看这个 babel-runtime 。虽说有官方的方案，但这块还是值得挖掘，是个微创新的点。
fis
fis
生态圈也是江河日下， babel
的问题都不能妥善解决。 建议使用这个包 parser-imweb
，将这个包和 babel
相关的包都装在本地吧，否则会掉到坑里。 也许是时候换到 webpack
？
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
