Babel

概念

Babel 是一个 JavaScript 编译器，提供了JavaScript的编译过程，能够将源代码转换为目标代码。

主要功能：

• 语法转换：将新版本的 JavaScript 语法转换为旧版本的语法
• Polyfill：通过引入额外的代码，使新功能在旧浏览器中可用，也就是做兼容性处理
• JSX: 将JSX语法转换成普通的JavaScript语法
• 插件: 为Babel提供自定义功能

主要过程：

• 解析 Parse: 将代码解析⽣成抽象语法树（AST），即词法分析与语法分析的过程；
• 转换 Transform: 对于 AST 进⾏变换⼀系列的操作，babel 接受得到 AST 并通过 babel-traverse 对其进⾏遍历，在此过程中进⾏添加、更新及移除等操作；
• ⽣成 Generate: 将变换后的 AST 再转换为 JS 代码, 使⽤到的模块是 babel-generator。

polyfill 和 runtime 区别

1. babel-polyfill 的原理是当运行环境中并没有实现的一些方法，babel-polyfill会做兼容。
   babel-polyfill 它是通过向全局对象和内置对象的prototype上添加方法来实现的。比如运行环境中不支持Array.prototype.find 方法，引入polyfill, 我们就可以使用es6方法来编写了，但是缺点就是会造成全局空间污染。
2. babel-runtime 它是将es6编译成es5去执行。我们使用es6的语法来编写，最终会通过babel-runtime编译成es5.也就是说，不管浏览器是否支持ES6，只要是ES6的语法，它都会进行转码成ES5.所以就有很多冗余的代码。
   babel-runtime: 它不会污染全局对象和内置对象的原型，比如说我们需要Promise，我们只需要import Promise from 'babel-runtime/core-js/promise’即可，这样不仅避免污染全局对象，而且可以减少不必要的代码。

官网 babeljs.io/

代码对应的 AST 手相语法树： astexplorer.net/

Babel所有的包 babeljs.io/docs/babel-…

• @babel/parser：将代码通过一些配置转为 AST 抽象语法树。
• @babel/traverse： 转换内部的一些操作。
• @babel/generator：生成最终的结果。
• @babel/core：整合了整合过程（核心包）。
• @babel/preset-env：es6 -> se5 的核心包。

我们可以通过以下库将 js 新语法转为旧语法：

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

支持新特性（原理是判断对象的原型上是否存在某个方法）：

npm i core-js -D

支持 tsx / jsx ：

npm install @babel/preset-react -D

core-js

core-js 是一个模块化的 JavaScript 标准库，为 ECMAScript 提供 polyfill（补丁）。

它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。

1）Polyfill 的概念：

Polyfill 是一段代码，用来实现浏览器中原生未支持的功能。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。

这时候 polyfill 就显得尤为重要，它模拟了这些新特性，使得老旧浏览器也能够“理解”并执行这些新的语法和功能。

2）core-js 的模块化设计：

core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。

例如，如果你只需要使用 Promise，那么可以只引入 core-js 的 Promise 模块：

import 'core-js/modules/es.promise';

3）与 Babel 的集成：
core-js 通常与 Babel 一起使用。当你使用 Babel 编译代码时，它能够自动根据你的目标环境（如浏览器版本）添加所需的 polyfill。

例如，Babel 插件 @babel/preset-env 可以与 core-js 配合使用，通过设置 useBuiltIns 选项指定 polyfill 的使用方式：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3  // corejs的版本
    }]
  ]
}

这段配置会根据你的代码，仅引入那些你实际用到的 polyfill，从而优化项目的构建体积。

stage-x

stage-x：指处于某一阶段的js语言提案

• Stage 0 - 设想（Strawman）：只是一个想法，可能有 Babel插件。
• Stage 1 - 建议（Proposal）：这是值得跟进的。
• Stage 2 - 草案（Draft）：初始规范。
• Stage 3 - 候选（Candidate）：完成规范并在浏览器上初步实现。
• Stage 4 - 完成（Finished）：将添加到下一个年度版本发布中。

babel-preset-env

• babel-preset-es2015: 可以将es6的代码编译成es5.
• babel-preset-es2016: 可以将es7的代码编译为es6.
• babel-preset-es2017: 可以将es8的代码编译为es7.
• babel-preset-latest: 支持现有所有ECMAScript版本的新特性