跳到主要内容

认识

一、认识​

Babel 是基于 JavaScript 编写的 JavaScript 转换工具库，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 Babel 特点如下:

  1. 语法转换: Babel 最主要的功能是将新版本的 JavaScript 语法转换为旧版本的语法，以确保在不同浏览器和环境中的兼容性。例如，将 ES6/ES2015+ 的代码转换为 ES5。

  2. 插件系统: Babel 提供了强大的插件系统，允许开发者根据需要添加不同的转换插件。这些插件可以处理特定的语法转换、优化和代码压缩等任务，使得 Babel 在处理各种需求时更加灵活和可定制。

  3. Polyfill 支持: Babel 还提供了对 JavaScript 新特性的 Polyfill 支持，这意味着它可以在转换代码时自动引入需要的 Polyfill，以填补目标环境中缺少的特性或 API。

  4. 源码映射: 在生成的代码中包含源码映射，这使得调试和错误追踪变得更加容易和准确。开发者可以在开发阶段方便地追踪到源代码中的错误。

  5. 支持广泛: Babel 支持各种 JavaScript 的扩展和提案，包括最新的 ECMAScript 规范、TypeScript、Flow 等，使得开发者可以在项目中使用最新的语言特性而不用担心兼容性问题。

  6. 社区和生态系统: Babel 拥有庞大的开发者社区和丰富的生态系统，有大量的插件和工具与其兼容，能够满足各种项目的需求，并且持续活跃地更新和维护。

二、核心​

  • babel.js 是一个 JavaScript 编译器

  • @bable/core 是 Babel 编译器的核心

  • babylon 是 Babel 使用的 JavaScript 解析器

  • @babel/types 用于 AST 节点的 Lodash 式工具库

  • @babel/traverse 用于对 AST 的遍历，维护了整棵树的状态，并且负责替换、移除和添加节点

  • @babel/generator 把 AST 转换成代码

  • Path (路径) 是一个对象，它表示两个节点之间的连接

    • replaceWith 可以用于替换节点
    • get 用于查找特定类型的子路径
    • find 用于向上查找一个指定条件的路径
    • unshiftContainer 用于把 AST 节点插入到类似于 body 这样的数组中

  • Scope （作用域）

    • generateUidldentifier 会生成一个不会和任何本地定义的变量冲突的标识符