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调用高级语法