阅读 638

从前端编译到手写 Babel

编译这个概念好像离前端很遥远,遥远到好像工作面试都不要求相关的知识。

但是,真的遥远么?

我们每天用 Babel、Typescript Compiler 来做代码的转换,用 Vue Template Compiler 来做 Vue 模版的解析,还会用 Eslint 做代码的静态检查、用 Terser 做代码压缩,最重要的是我们的 JS 代码是跑在 JS 引擎上的。

这些不都是编译技术么?

现在,你还觉得编译离前端很遥远么?

其实,并不是编译技术在前端用不到,而恰恰是因为太过常用而容易被忽略。我们会去学习一些工具的使用,但不会去学习更底层的一些原理。

所以,我第一次的直播分享就起名为《从 Babel 深入前端编译原理》,就是想借助 Babel 来像大家展示一下编译技术能做什么:

可以做一些对业务有意义的事情: 自动埋点、自动国际化、自动生成 API 文档

可以做一些工具:Typescript 类型检查、压缩混淆、Linter

还可以基于 Babel Parser 实现 JS 解释器

这些,直播中都实现了。

live.juejin.cn/4354/481502…

当然,首先还是从基础开始,要先了解编译流程、AST、api,之后才是各种实战。直播的前半部分是一些基础知识的铺垫。

讲完之后,我们做了总结:

前端领域主要用到转译、解释、编译这三种编译技术。

转译是源码转源码的转换编译器,比如 Babel、Typescript、Terser 等都是这种,这也是我们最常用的

解释是解释执行源码,比如各种 JS 引擎,包括 V8、JavascriptCore,Hermes 等

编译是指高级语言到低级语言,比如字节码的转换,前端的新技术 WebAssembly 就涉及到编译器的知识。

直播和小册中能够入门前两种。

直播结束之后,有很大一部分同学对前端领域的编译技术能做什么有个一个清晰的认识,也知道了 Babel 这个工具怎么用。

但是,这些还不够,我们不能只满足于用,就像小册的名字《Babel 插件通关秘籍》,只会用怎么算通关呢?

所以,我们手写一个 Babel,帮助大家彻底通关。

下期直播的内容就是《手写 Babel》。

(在那之前小册也会更完的)

如果说第一期是介绍编译技术能做什么,是一个广度的扩充,那么第二期就是把 Babel 讲透,是一个深度的扩充。

没看第一期的同学,可以看下回放。对 Babel 感兴趣的同学可以继续参与第二期直播(8 月 12 晚 8点),一起手写一个 Babel!

编译,其实并不遥远。

文章分类
前端