babel深入

[官网] - Babel](www.babeljs.cn/docs/)

介绍

其实官网介绍的很详细了，建议仔细阅读：

babel是什么

babel是用nodejs写的js语法解析器，你可以认为是用nodejs解析.js文件，最后生成js文件，在解析翻译的过程出插入、删除、转换代码。

npm install --save-dev @babel/core

// nodejs下
const babel = require("@babel/core");
// 获取文件字符串
const toParseCode = fx.readFileSync('filename.js')

babel.transformSync(toParseCode, optionsObject);

@babel/core 包含我们常说的babel的所有核心功能（发现当一个库的功能大而全的时候都会进行拆分：postcss 支持插件、webpack plugin和loader）

@babel/cli

@babel/cli 是一个能够从终端（命令行）使用的工具

npm install --save-dev @babel/core @babel/cli

(./node_modules/.bin/babel | npx babel) src --out-dir lib

编译src所有的js文件，并输出到 lib目录下

插件和预设（preset）

预设是一组插件的集合，单个插件为了精简和细分尽量的模块化，导致完成一个功能需要多个插件，为了减少配置，我们之间使用preset 配置我们想要的功能

在没有babel任何插件配置的情况下，babel是什么都不会做的，只是一遍扫描

常用插件：
- @babel/plugin-transform-arrow-functions：转换ES6+的箭头函数

常用预设：

@babel/preset-env：包含所有的类似@babel/plugin-transform-arrow-functions这样能够转换 ES6+语法到低版本（ES5 或者更低）

{
  "presets": [
    // 注意 preset 配置 options 的方式
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        }
      }
    ]
  ]
}

Polyfill

在 Babel 7.4.0 版本之前，主要靠 @babel/polyfill 完成 js代码的polyfill，但是从 Babel 7.4.0 版本开始，这个软件包已经不建议使用了，建议直接包含 core-js/stable （用于模拟 ECMAScript 的功能）和 regenerator-runtime/runtime 需要使用转译后的生成器函数

@babel/polyfill 怎么做

// 预设 @babel/preset-env 会帮你下好所有需要的插件，比如 @babel/core
npm i @babel/preset-env babel-loader -D

// 这个代码需要塞到浏览器里，所有用save
npm install --save @babel/polyfill

项目下 babel.config.json 文件

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        // 按需加载 优化
        // 默认是 false ，直接全量加载 
        // entry，根据环境配置 加载配置的允许的浏览器需要那些 polyfill
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

babel会检查你所有的代码，找到你使用过的所有ES6+的超前特性，把需要的polyfill包含进来最终和打包源代码一起输出。

@babel/polyfill 最新替代方案

@babel/polyfill 就是由 core-js + regenerator-runtime 组成，官方不维护这个 @babel/polyfill，因此我们需要完成兼容可以直接的找 core-js就好

npm r @babel/polyfill -S
npm i core-js@3 regenerator-runtime -S

如果你希望按需加载

{
  "presets": [
    [
      "@babel/preset-env",
      {
        // 根据允许浏览器配置文件 
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

希望通过browserslist + preset-env的target，按照浏览器预设加载浏览器需要的 polyfill
```
{
  "presets": [
    [
      "@babel/preset-env",
      {
        // 根据允许浏览器配置文件 
        "useBuiltIns": "entry",
        "corejs": 3
      }
    ]
  ]
}
```
需要注意的是，这种模式下，需要手动的引入一下
```
import "core-js/stable";
import "regenerator-runtime/runtime";
```
总结

babel是否能够按需引入，或者全量引入，或者按browserslist引入，可以从打包的文件大小看的出来，可以通过这个测试

10-babel深入