• Babel 插件通关秘籍
  • Git 原理详解及实用指南
  • Nest 通关秘籍
  • React 通关秘籍
  • TypeScript 全面进阶指南
  • TypeScript 类型体操通关秘籍
  • 现代CSS
  • Babel 插件通关秘籍
  • Git 原理详解及实用指南
  • Nest 通关秘籍
  • React 通关秘籍
  • TypeScript 全面进阶指南
  • TypeScript 类型体操通关秘籍
  • 现代CSS
  • Babel 插件通关秘籍

    • 1.Babel 的介绍
    • 2.Babel 的编译流程
    • 3.Babel 的 AST
    • 4.Babel 的 API
    • 5.实战案例:插入函数调用参数
    • 6.JS Parser 的历史
    • 7.traverse 的 path、scope、visitor
    • 8.Generator 和 SourceMap 的奥秘
    • 9.Code- Frame 和代码高亮原理
    • 10.Babel 插件和 preset
    • 11.Babel 插件的单元测试
    • 12.Babel 的内置功能(上)
    • 13.Babel 的内置功能(下)
    • 14.Babel 配置的原理
    • 15.工具介绍:VSCode Debugger 的使用
    • 16.实战案例:自动埋点
    • 17.实战案例: 自动国际化
    • 18.实战案例:自动生成 API 文档
    • 19.实战案例: Linter
    • 20.实战案例: 类型检查
    • 21.实战案例: 压缩混淆
    • 22.实战案例: JS 解释器
    • 23.实战案例: 模块遍历
    • 24.Babel Macros
    • 25.如何调试 Babel 源码?
    • 26.手写 Babel:思路篇
    • 27.手写 Babel: parser 篇
    • 28.手写 Babel: traverse 篇
    • 29.手写 Babel: traverse -- path篇
    • 30.手写 Babel: traverse -- scope篇
    • 31.手写 Babel: generator篇
    • 32.手写 Babel: core篇
    • 33.手写 Babel: cli篇
    • 34.手写 Babel: 总结
    • 35.小册总结
    • 36.加餐:会了 babel 插件,就会写 prettier 插件

Babel 插件通关秘籍

深入探究 babel 编译原理,学完可以写任何 babel 插件。

作者介绍

某一线大厂某架构组前端工程师,公众号[神光的编程秘籍],维护公司的 builder 和 ide,对编译原理、前端工程化有一定的研究。

小册介绍

实战案例源码

babel 已经是前端领域的必备工具了,它可以让我们使用一些新的语法和 api,babel 会在编译的过程中转为目标环境支持的语法并引入 polyfill。

而且,babel 也提供了强大的插件机制,我们可以通过它暴露出的 api 来开发各种代码转换插件。

babel 是一种源码到源码的转换编译器,学习 babel 的原理的过程也会学到编译原理的一些知识。

除了用来编译代码外,babel 也经常用来做静态分析,分析代码,提取信息,然后用于生成文档、lint、type check 等。

我们会用大量的实战案例,让你真正能够把 babel 基于 AST 的代码转换和静态分析能力用起来。

实战部分包括:

自动国际化:自动转换代码为国际化之后的,自动引入资源包并替换代码中的文本

自动生成文档:自动生成 api 文档,不再需要手动去维护。

自动埋点:自动进行函数插桩,埋点是一种常见的函数插桩。

linter: 探索 eslint、stylelint 等 lint 工具的实现原理,能够实现各种 lint 插件。

type checker:实现简单的 ts 类型检查,会对 typescript 的类型检查的原理会有更深的理解。

压缩混淆:前端必用工具之一,探索它的实现原理,压缩怎么做,混淆怎么做,怎么用 babel 实现,开阔下思路。

js 解释器: AST 除了转译、静态分析外,还可以直接解释执行,学完这个案例可以知道解释器是怎么解释代码的。

模块遍历器:基于 babel 做模块的遍历,理解打包工具的依赖图构建原理。

手写 babel: 手写 babel 是为了加深对 babel 的理解,真正掌握 babel。

小册分为 babel 插件基础、babel 插件进阶、babel 插件实战、手写简易的 babel 四部分内容:

课程大纲

你会学到什么?

  • babel 的编译流程、AST、api
  • babel 插件和 preset 的方方面面
  • js parser 的历史
  • babel macros
  • babel 内置功能的实现思路
  • 实现一个 lint 工具
  • 实现一个 ts type checker
  • 自动埋点
  • 自动国际化
  • 自动生成文档
  • 压缩混淆的原理
  • 打包工具的模块依赖图是怎么生成的
  • 手写一个简易的 babel

适宜人群

  • 熟悉 js 语法,用过 babel
  • 想深入了解 babel 原理的前端开发者
  • 想入门编译原理的工程师

购买须知

  1. 本小册为图文形式内容服务,共计 33 节;
  2. 全部文章已更新完成;
  3. 购买用户可享有小册永久的阅读权限;
  4. 购买用户可进入小册微信群,与作者互动;
  5. 掘金小册为虚拟内容服务,一经购买成功概不退款;
  6. 掘金小册版权归北京北比信息技术有限公司所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表,违者将依法追究责任;
  7. 在掘金小册阅读过程中,如有任何问题,请邮件联系 xiaoce@xitu.io
上次更新: 6/21/25, 9:42 AM
贡献者: YNight