# babel - 入门
前端开发的时候少不了跨浏览器支持，处理浏览器兼容就是家常便饭，babel正是处理JS跨浏览器兼容的的利器。
babel 职责
- 转译新语法，如箭头函数、解构赋值；
- polyfill 不存在的特性，如 Generator、Symbol、Promise；
核心依赖包：
@babel/core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。
@babel/parse：JS解释器模块内容。提供parse接口解释，最新的 ECMAScript 标准，以及JSX，Flow，TypeScript，和其他实验性语言。（这个模块便是以前的babylon）。
@babel/traverse：JS遍历AST节点模块。用于遍历解释器模块解析出来的AST节点。
@babel/generator：JS生成器，主要用于将解释器解释得到的AST生成成为可解析的JS代码。
工具包
- core-js：提供 ES6+ 的各种 polyfill；
- regenerator-runtime：提供generator、async、await的 polyfill；
- @babel/polyfill：包含
core-js和regenerator-runtime两个模块； - @babel/runtime：包含helpers（定义了一些处理新的语法关键字的帮助函数）和regenerator（仅仅是引用
regenerator-runtime这个npm包）。可以按需加载 polyfill。 - @babel/runtime-corejs2：包含helpers，
core-js@2和regenerator-runtime，不支持实例方法。 - @babel/runtime-corejs3：包含helpers，
core-js@3和regenerator-runtime，支持实例方法。
插件包
- @babel/helpers：用来把 @babel/core 处理的代码中插入的帮助函数当做一个模块引入，减小代码的体积。helpers 会把 polyfill 赋值给局部变量来使用，所以不会污染全局空间。
- @babel/plugin-transform-runtime：自动按需引入 polyfill，并且对公共方法进行抽离，减小体积。比如说有100个模块都使用 promise，但是 promise 的 polyfill 仅仅存在1份。