34 | 编译原理（下）：编译原理给我们带来了什么？
大圣
该思维导图由 AI 生成，仅供参考
你好，我是大圣。
上一讲我们深入研究了 Vue 里的 compiler-dom 和 compiler-core 的流程，相信学完之后，你已经对编译原理的基础知识很熟悉了。
这时候你肯定会有一个疑问，AST、transform、generate 这些概念以前工作中也没遇见过，难道学了这个就只能面试用吗？ 当然不是，编译原理作为计算机世界的一个重要的学科，除了探究原理和源码之外，我们工作中也有很多地方可以用到。
从宏观视角来看，编译原理实现的功能就是代码之间的转换。哪怕我们只是掌握了入门知识，也能可以实现 Vue 中 template 到 render 函数转化这样的功能。
现在的前端发展，很大程度上离不开编译原理在前端圈的落地实践，只要是我们想做自动化代码转化的地方，都可以看到编译的身影。
举个例子，Babel 把 ES6 中的新语法转换成低版本浏览器支持的语法，我们才能在项目中愉快地使用箭头函数等特性，把浏览器的兼容性交给 Babel 来处理，甚至现在社区内还出现了 gogocode 这种把 Vue 2 代码转换成 Vue 3 代码的工具。
在工作中我们可以借助 Babel 和 vite 提供给我们的能力，parse，transform，generate 等代码都不需要我们自己实现，只需要考虑代码转换的逻辑就可以了，下面我给你举几个小例子。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
编译原理在前端开发中的应用越来越广泛，本文从宏观视角出发，介绍了编译原理在实际工作中的应用。首先，通过自定义Vite插件实现了自动导入Vue 3提供的API，简化了组件内部代码的编写。其次，利用Babel实现了自动为异步任务添加try-catch语句，提高了代码的健壮性和可维护性。文章通过实际代码示例，生动展示了编译原理在前端开发中的实际应用，为读者提供了深入理解和应用编译原理的思路和方法。 文章还探讨了Babel的应用能力，如国际化和页面监控，以及Vue中的compiler原理和手写vite的代码内容。总结时提到了代码自动导入的操作思路，以及在工作项目中需要用到代码转化思路的思考题。 通过本文，读者可以了解到编译原理在前端开发中的实际应用，以及如何利用Babel和Vue的compiler进行代码转化和优化，为他们提供了提高开发效率和代码可维护性的思路和方法。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(11)
- 最新
- 精选
- SjmBreadrain除了留言之外还有别的互动方式不？
作者回复: 课程介绍页有个微信群
2022-01-0832 
费城的二鹏很多魔板代码都可以通过代码转化的方式实现，我们的网络请求代码非常固定，打算试试用这种方式减少模板代码2022-01-093
烛火星光比如我们可以使用 Babel 实现国际化 想问一下，这玩意怎么实现，能给一个简单示例么2022-09-05归属地：江苏2
henry工具库自动导入如何跟ts的类型系统一起用呢？ts类型检查和类型提示应该不能正常工作了...2022-07-051
陈坚泓这节不错 非常实用 可以减少很多重复性操作2022-05-201
海阔天空厉害厉害，以前用得比较多的就是css的编译，less 函数的编译处理兼容性问题等。部分用到登录信息的处理。2022-01-101- james不错不错2022-01-081
Johnson很实用。😁2022-01-071
Mr_shaojun厉害厉害，打开了新世界的大门2022-12-30归属地：浙江- Johnson试了一下，下面的代码放在main.js时会自动增加try...catch，但是代码放在组件中无法自动增加，这个要怎么解决处理呢？ async function test() { await delayError("ref is not defined"); }2022-07-15
收起评论