Babel相关
什么是Babel？
- Babel就是一个js转码器，将高版本js转化为低版本js以兼容各种或者各个版本的浏览器
**Babel各版本区别
-
Babel5
- babel-cli 一个babel命令行工具
- babel-core 核心编译引擎
- babel-polyfill 各种高级别语法糖或者api垫片
Babel6
-完全插件化，不包含任何转换器，需要按需引入插件以实现功能
@babel/core和@babel/cli工作原理
babel/core本身不具备转码功能，它把功能拆分到一个个插件中，比如负责解析阶段的是parser，作用是将源码解析成AST，负责生成节点的是generator，作用是将AST转化成低版本的js代码
-
根据配置文件，可以决定产物中是否存在代码，ast或者map文件
var options = { //是否生成解析的代码 code: true, //是否生成抽象语法树 ast: true, //是否生成sourceMap sourceMaps: true, plugins: [], presets: [], }; -
babel/cli是自带的交互式编译工具
//全局安装调用 npm install --g @babel/cli babel index.js -o output.js //本地安装调用 npm install --save-dev @babel/cli npx babel index.js -o output.js
预设
- 由于babel插件众多，如果每次都要一个个去配置太耗时，所以提供了预设，其实就是插件包，一个预设里面包含了很多不同功能且必须的插件，省去配置的时间
配置文件
- 命令行虽然可以配置插件和预设（preset），但是为了结合前端工程化工具，比如gulp，webpack等，还可以通过配置文件进行配置
- 项目常见的babel配置文件有：babelrc.js,babel.confog.js等
主要配置内容像这样：{ "presets": [...], "plugins": [...] } - 一般通过配置文件来给babel/core添加一些预设和plugin插件
- 有时候我们需要给预设和插件设置参数，这个时候每个项就需要用到数组来设置
{ "plugins": [ [ "@babel/plugin-transform-arrow-functions", { "spec": true } ] ] }
执行顺序
- 插件比预设先执行
- 插件执行顺序时插件数组从前向后执行
- 预设执行顺序时数组从后向前执行
浏览器支持
- 默认情况下presets-evn是presets-es2015 presets-es2016和presets-es2017的叠加
- 支持特定版本的浏览器
{ "presets": [ [ "@babel/env", { "targets": "last 2 Chrome versions" } ] ] }
spec
解析箭头函数插件的参数，默认为false，如果设置为true。将会用bind包裹this，以便在箭头函数内部使用
@babel/polyfill
presets可以解决大部分语法转换，但是一些ES6原型链上的函数或者新的API，低版本浏览器本身就不支持。比如promise，这个时候就需要用过polyfill也就是垫片来解决了。实际上就是按其他方式实现了一个promise，然后将pomise设置到浏览器全局对象中。
确定是这样会污染全局变量
@babel/runtime
将所有辅助函数放置到一个函数包中，在使用的地方按需引入，这样做的效果类似polyfill，只不过你没法直接通过api调用高级语法
