Babel 及其使用

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

核心库@babel/core 模块中。看到 core 这个词了吧，意味着核心，没有它，在 babel 的世界里注定寸步难行。不安装 @babel/core，无法使用 babel 进行编译。

CLI命令行工具 @babel/cli 主要是babel这个命令
将命令配置在 package.json 文件的 scripts 字段中

"scripts": {
    "compiler": "babel src --out-dir lib --watch"
}

//src下自动先index.js
//默认生成也在lib下的index 我猜的
//执行 npm run compiler

因为 Babel 虽然开箱即用，但是什么动作也不做，如果想要 Babel 做一些实际的工作，就需要为其添加插件(plugin)。

插件的使用
1.npm安装
2.配置文件书写
在项目目录下新建 .babelrc 文件

//.babelrc
{
    "plugins": ["@babel/plugin-transform-arrow-functions"]
}

3.执行 得到箭头函数 转换为 普通函数

一个个的插件安装配置太繁琐 所以用预设！
通过使用或创建一个 preset 即可轻松使用一组插件。
官方
@babel/preset-env
@babel/preset-flow
@babel/preset-react
@babel/preset-typescript

@babel/preset-env 主要作用是对我们所使用的并且目标浏览器中缺失的功能进行代码转换和加载 polyfill，在不进行任何配置的情况下，@babel/preset-env 所包含的插件将支持所有最新的JS特性(ES2015,ES2016等，不包含 stage 阶段)，将其转换成ES5代码。例如，如果你的代码中使用了可选链(目前，仍在 stage 阶段)，那么只配置 @babel/preset-env，转换时会抛出错误，需要另外安装相应的插件。

需要说明的是，@babel/preset-env 会根据你配置的目标环境，生成插件列表来编译。对于基于浏览器或 Electron 的项目，官方推荐使用 .browserslistrc 文件来指定目标环境。默认情况下，如果你没有在 Babel 配置文件中(如 .babelrc)设置 targets 或 ignoreBrowserslistConfig，@babel/preset-env 会使用 browserslist 配置源。

因为语法转换只是将高版本的语法转换成低版本的，但是新的内置函数、实例方法无法转换。这时，就需要使用 polyfill 上场了，顾名思义，polyfill的中文意思是垫片，所谓垫片就是垫平不同浏览器或者不同环境下的差异，让新的内置函数、实例方法等在低版本浏览器中也可以使用。

但是垫片有个问题 代码体积会变大
解决办法 使用babel的core js3
npm install --save core-js@3
修改配置文件

//.babelrc
const presets = [
    [
        "@babel/env",
        {   
            "useBuiltIns": "usage",
            "corejs": 3
        }
    ]
]

@babel/plugin-transform-runtime 是一个可以重复使用 Babel 注入的帮助程序，以节省代码大小的插件。

比如一个类 里面多个方法
其他程序页面用到这个类 就会多次实例 太费事儿

如果我们源码中使用到了 async/await，那么编译出来的代码需要 require(“regenerator-runtime/runtime”)，在 @babel/polyfill 的依赖中，当然啦，你也可以只安装 regenerator-runtime/runtime 取代安装 @babel/polyfill。

@babel/plugin-transform-runtime 需要和 @babel/runtime 配合使用。

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

/.babelrc
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime"
        ]
    ]
}