Babel

概念

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

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

官网 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，从而优化项目的构建体积。