babel使用相关知识点

本篇主要汇总babel使用的相关知识点。包含一下工具：

• babel-polyfill —— 7.4 之后弃用，推荐直接使用 corejs 和 regenerator ？？
• babel-runtime

一、安装babel和配置

• 安装 babel 插件 npm i @babel/cli @babel/core @babel/preset-env -D
• 新建 .babelrc，配置 preset-env
• 新建 src/index.js ，写一个箭头函数
• 运行 npx babel src/index.js ，看结果

二、使用polyfill

1、babel-polyfill

• 什么是 polyfill ？—— 即一个补丁，引入以兼容新 API（注意不是新语法，如箭头函数），如搜索“Object.keys polyfill” 和 “Promise polyfill”
• core-js 集合了所有新 API 的 polyfill 。github.com/zloirock/co…
• regenerator 是 generator 的 polyfill 。 github.com/facebook/re…
• babel-polyfill 即 core-js 和 regenerator 的集合，它只做了一层封装而已。

2、基本使用

• src/index.js 中写一个 Promise，打包看结果

• npm install --save @babel/polyfill 【注意】要 --save

• 然后引入 import '@babel/polyfill'

• 再打包，看结果

  • 解释：babel 仅仅是处理 ES6 语法，并不关心模模块化的事情。模块化归 webpack 管理
  • 全部引入 polyfill ，体积很大

3、按需加载

• 新增 "useBuiltIns": "usage" （注意要改写 preset 的 json 结构）

• 删掉入口的 import '@babel/polyfill'

• 再打包，看结果

  • 提示选择 core-js 的版本，增加 "corejs": 3
  • 只引入了 promise 的 polyfill

三、babel-runtime

1、什么是babel-runtime

babel-runtime是Babel编译器的一个运行时库，它包含了一些Babel转换代码时所需的辅助函数和模块化机制，例如ES6的Promise、Generator、Set等。这些辅助函数和模块化机制在转换代码时会被插入到编译后的代码中，以实现代码的兼容性和可用性。

使用babel-runtime可以避免在编译后的代码中重复出现相同的辅助函数和模块化机制，从而减小编译后代码的大小。同时，它还提供了一些可重用的工具函数和类，例如regeneratorRuntime等，以支持ES6的Generator函数和Async/Await语法。

2、解决什么问题

babel-polyfill 的问题 —— 会污染全局变量

• 如果是一个网站或者系统，无碍
• 如果是做一个第三方工具，给其他系统使用，则会有问题
• 不能保证其他系统会用 Promise 和 includes 做什么，即便他们用错了，那你也不能偷偷的给更改了

3、按需加载

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

• npm install --save @babel/runtime，注意是 --save

• 配置 "plugins": ["@babel/plugin-transform-runtime"]

  • 其中 "corejs": 3, v3 支持 API 如数组 includes ，v2.x 不支持

• 删掉 "useBuiltIns": "usage"

• 运行代码