babel

babel 环境搭建与配置

先确保安装了Node.js
初始化项目
```
npm init -y
```
创建一个package.json文件
安装babel 相关依赖：核心包为 @babel/cli 、@babel/core 、@babel/preset-env 、core-js
```
npm install --save-dev @babel/core @babel/cli @babel/preset-env 
```
- @babel/core 是babel 的核心功能
- @babel/preset/env : 一个智能预设，允许使用最新的Javascript，它里面预设置了我们常用的plugin　
- @babel/cli 允许通过命令行使用babel
- core-js:提供实际的polyfill 实现
新建.babelrc 配置文件
```
{
    "presets":["@babel/preset-env"]
}
```
- 常用的预设preset: @babel/preset-env、@babel/preset-flow、@babel/preset-react、@babel/preset-typescript　　
新建src 源码目录文件,新建一个index.js文件
```
const sum = (a,b) => a+b
```
编译代码可以通过package.json中添加脚本来运行
```
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"babel src -d dist"
 },
```
src:是es6代码的目录,dist:是编译后代码输出目录
运行
```
npm run build
```
会多出一个dist文件夹，编译后的文件存放着这里

babel polyfill 按需引入　　　

　　1.什么是polyfill？

　　　　polyfill: 根据浏览器对JS代码的兼容情况做补丁或者说是做兼容

2.为什么需要polyfill?

- Babel 只能转换语法层面。像箭头函数、let、const、class 等等
- Babel 无法解析API 层面，像Promise、includes、map 等等 babel无法做到兼容处理
- 所以Babel 就需要使用polyfilll来处理对新API的兼容

3.core-js 和 regenerator

　　　　core-js ：是一个标准库，集成了所有ES6新语法的polifill（补丁）

regenerator：因为core-js不支持ES6中的generator语法，所以需要该库的支持

- - generator 函数是处理异步的，函数加* ，然后 yield xxx。使用的时候.next()实现异步
  - 代码例子,
```
function* tell(){
     consoe.log('执行a处理')
     yield 'a'；
    console.log('执行b处理')
    yield 'b'
}
let k = tell()
console.log(k.next())
console.log(k.next())
```
  - 现在基本都用async/await ，很少用generator 来实现异步

4.babel-polyfill

　　　　babel-polyfill 就是core-js和regenerator两者的集合

5. Babel7.4.0 之后就弃用babel-polyfill.推荐直接使用 core-js 和 regenerator 、

6. babel-polyfill 按需引入

polyfill 文件很大，如果全部引入会是打包体积很大。所以可以配置按需引入

按需引入的配置：

.babelrc 配置

{
    "presets":[
        [
            "@babel/preset-env",
            {
                "useBuiltIns":"usage", //只引入用到的polyfill
                "corejs":3 //版本
            }
        ]
    ]
}

重新打包后输出的文件

"use strict";

require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.promise.js");
var sum = function sum(a, b) {
  return a + b;
};
// 新的 API
Promise.resolve(100).then(function (data) {
  return data;
});

// 新的 API
[10, 20, 30].includes(20);

代码中用到了哪个语法特性，就会require 对应的功能

注意：babel 不处理模块话，直接require进来不在处理。（模块话由webpack处理）

babel-runtime

　　为了避免全局命名冲突，提高代码的可维护性，可以使用babel-runtime

安装

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

.bablerc 增加插件配置

"plugins":[
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]

重新打包，看一下代码：

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
var _context;
var sum = function sum(a, b) {
  return a + b;
};
// 新的 API
_promise["default"].resolve(100).then(function (data) {
  return data;
});

// 新的 API
(0, _includes["default"])(_context = [10, 20, 30]).call(_context, 20);