前言
半年前也写过一篇babel的简单使用文章,当时看了下babel的文档,但是很多地方还不理解,所以文章里没有怎么说道babel的一些关键概念,只是机械的描述如何使用(配合webstorm)。
最近刚好遇到一个问题,发现是因为js代码中使用的es6的新api没有被转义,导致抛异常了。查找了下资料,是没有引入polyfill所致,之前一直对babel的这些概念没有很好的理解,把这个bug作为引子,认真了解了下babel,写出此文。
本文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。
Babel的包构成
核心包
babel-core:babel转译器本身,提供了babel的转译API,如babel.transform等,用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。
babylon:js的词法解析器
babel-traverse:用于对AST(抽象语法树,想了解的请自行查询编译原理)的遍历,主要给plugin用
babel-generator:根据AST生成代码
功能包
babel-types:用于检验、构建和改变AST树的节点
babel-template:辅助函数,用于从字符串形式的代码来构建AST树节点
babel-helpers:一系列预制的babel-template函数,用于提供给一些plugins使用
babel-code-frames:用于生成错误信息,打印出错误点源代码帧以及指出出错位置
babel-plugin-xxx:babel转译过程中使用到的插件,其中babel-plugin-transform-xxx是transform步骤使用的
babel-preset-xxx:transform阶段使用到的一系列的plugin
babel-polyfill:JS标准新增的原生对象和API的shim,实现上仅仅是core-js和regenerator-runtime两个包的封装
babel-runtime:功能类似babel-polyfill,一般用于library或plugin中,因为它不会污染全局作用域
工具包
babel-cli:babel的命令行工具,通过命令行对js代码进行转译
babel-register:通过绑定node.js的require来自动转译require引用的js代码文件
babel的配置
使用形式
如果是以命令行方式使用babel,那么babel的设置就以命令行参数的形式带过去;
还可以在package.json里在babel字段添加设置;
但是建议还是使用一个单独的.babelrc文件,把babel的设置都放置在这里,所有babel API的options(除了回调函数之外)都能够支持,具体的options见babel的API opti