Kick Off Babel

Appearance

学习资源汇总 ​

这里收集了学习 Babel 的优质资源，帮助你从入门到精通。

官方资源 ​

核心文档 ​

GitHub 仓库 ​

教程文章 ​

入门级 ​

  1. Babel 入门教程 - 阮一峰老师著
  2. Babel 简明教程
  3. ES6+ 转 ES5：Babel 使用指南

进阶级 ​

  1. 深入理解 Babel 插件开发
  2. Babel 插件开发实战
  3. AST 抽象语法树解析

实战项目 ​

  1. 实现一个简单的 Babel 插件
  2. 使用 Babel 自动化代码优化
  3. Babel 在实际项目中的应用

视频教程 ​

中文视频 ​

  1. Babel 插件开发实战 - B站
  2. 前端编译原理：从 Babel 到工程化
  3. 深入浅出 Babel

英文视频 ​

  1. Babel: Modern JavaScript Development
  2. Writing Custom Babel Plugins

工具和资源 ​

在线工具 ​

VSCode 插件 ​

Chrome 插件 ​

书籍推荐 ​

中文书籍 ​

  1. 《深入浅出 Babel》- 深入理解编译原理
  2. 《ES6 标准入门》(第3版) - 阮一峰著，包含 Babel 章节
  3. 《JavaScript 高级程序设计》- 第4版，涵盖现代工具链

英文书籍 ​

  1. "Programming JavaScript Applications" - 包含构建工具章节
  2. "You Don't Know JS" - 涉及转译器概念

社区资源 ​

中文社区 ​

国际社区 ​

会议演讲 ​

实践项目 ​

学习项目 ​

  1. babel-plugin-demo - 各种插件示例
  2. awesome-babel - Babel 资源合集
  3. create-babel-plugin - 插件脚手架

开源实践 ​

  • 查看 React、Vue 等项目如何使用 Babel
  • 学习主流脚手架（create-react-app、Vue CLI）的 Babel 配置

学习路径建议 ​

初级（1-2周） ​

  1. 了解 Babel 基本概念和作用
  2. 学习基本配置和使用
  3. 熟悉常用 presets 和 plugins

中级（1-2个月） ​

  1. 深入学习 AST（抽象语法树）
  2. 编写简单的 Babel 插件
  3. 理解 Babel 的工作原理

高级（持续） ​

  1. 开发复杂的 Babel 插件
  2. 贡献 Babel 开源项目
  3. 研究编译器理论和优化

相关技术 ​

  • Webpack - 模块打包工具
  • Rollup - 下一代打包工具
  • TypeScript - JavaScript 的超集
  • Flow - JavaScript 静态类型检查
  • ESLint - JavaScript 代码检查工具

常用 Polyfill ​

提示：建议按照官方文档 → 实战教程 → 插件开发的顺序学习，边学边练效果最佳。

有好的资源推荐？欢迎提交 PR 帮助完善这个列表！