babel学习

main.js第一行导入babel-polyfill
import 'babel-polyfill'

.babelrc文件
{
  //--presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装,presets（预设）即将常用的plugin打一个包重新取一个名字，比如@babel/preset-env（一堆plugin集合），如果@babel/preset-env不包含某些插件，即可在"plugins"进行配置
  "presets": [
    ["@vue/app", {
      "modules": false,
      "useBuiltIns": "entry"
    }]
  ],
  "compact": false,
  "plugins": []
}

其中@vue/app指向node_module中的 @vue/babel-preset-app，它是通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill。

所有的 Vue CLI 应用都使用 @vue/babel-preset-app，它包含了 babel-preset-env（最新转码规则）、JSX 支持以及为最小化包体积优化过的配置。

默认情况下，它会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而，这也意味着如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。此处为了解决引发兼容问题的具体原因，故导入所有polyfill

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装,规则集含有：

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0（展示阶段）
$ npm install --save-dev babel-preset-stage-1（征求意见阶段）
$ npm install --save-dev babel-preset-stage-2（草案阶段）
$ npm install --save-dev babel-preset-stage-3（候选人阶段）

总结：@babel/preset-env是用于转化语法，而@babel-polyfill为未实现的新api提供别的实现方式来保证新api能够正常运行的插件集合，包含@babel-core和@babel-regenerator