babel原理_【JavaScript】深入理解Babel原理及其使用

前言

半年前也写过一篇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