初探babel

前言：此文章仅仅作为个人理解

• babel是一个广泛使用的编译器，可以将es6转成es5代码，从而在现有的环境执行
• 使用babel的第一步就是配置一下.babelrc文件，存放在项目的根目录下

基本格式如下：

{
  "presets": [],
  "plugins": []
}

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

ES2015转码规则

$ npm install --save-dev babel-preset-env 

官方有一句话这样说：

根据你支持的环境自动决定适合你的 Babel 插件的 Babel preset。它使用了 compat-table

在没有任何配置选项的情况下，babel-preset-env 与 babel-preset-latest（或者babel-preset-es2015，babel-preset-es2016和babel-preset-es2017一起）的行为完全相同。
参考：https://www.babeljs.cn/docs/plugins/preset-env/

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 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign ）都不会转码

什么是babel-polyfill

当运行环境中并没有实现的一些方法，babel-polyfill 会给其做兼容。 但是这样做也有一个缺点，就是会污染全局变量，而且项目打包以后体积会增大很多，因为把整个依赖包也搭了进去。所以并不推荐在一些方法类库中去使用。

引入babel-polyfill会有一定副作用，比如：

• 引入了新的全局对象：比如Promise、WeakMap等。
• 修改现有的全局对象：比如修改了Array、String的原型链等

什么是babel-runtime

为了不污染全局对象和内置的对象原型，但是又想体验使用新鲜语法的快感。就可以配合使用babel-runtime和babel-plugin-transform-runtime。 babel-plugin-transform-runtime用于构建过程的代码转换，babel-runtime是实际导入项目代码的功能模块。 通俗来说，babel-plugin-transform-runtime是babel构建环境的依赖，比如当前运行环境不支持promise，可以通过引入babel-runtime/core-js/promise来获取promise， 或者通过babel-plugin-transform-runtime自动重写你的promise。也许有人会奇怪，为什么会有两个runtime插件，其实是有历史原因的：刚开始开始只有babel-runtime插件，但是用起来很不方便，在代码中直接引入helper 函数，意味着不能共享，造成最终打包出来的文件里有很多重复的helper代码。所以，Babel又开发了babel-plugin-transform-runtime，这个模块会将我们的代码重写，如将Promise重写成_Promise（只是打比方），然后引入_Promise helper函数。这样就避免了重复打包代码和手动引入模块的痛苦。

使用：

npm i babel-plugin-transform-runtime --save-dev
npm i babel-runtime --save

• 一定要装这两个才能运行，babel-plugin-transform-runtime依赖于babel-runtime

最后.babelrc配置如下：

{
    "presets": [
        [
            "babel-preset-env",
            {
                "targets": {
                    "browsers": ["ie >= 8", "chrome >= 62"]
                }
            }
        ]
    ],
    "plugins": [
        "transform-runtime"
    ]
}