Babel 插件通关秘籍
作者介绍
某一线大厂某架构组前端工程师，公众号[神光的编程秘籍]，维护公司的 builder 和 ide，对编译原理、前端工程化有一定的研究。
小册介绍
实战案例源码
babel 已经是前端领域的必备工具了，它可以让我们使用一些新的语法和 api，babel 会在编译的过程中转为目标环境的支持的语法并引入 polyfill。除此以外，babel 也提供了强大的插件机制，我们可以通过它暴露出的 api 来开发各种代码转换插件。
babel 是一种源码到源码的转换编译器，学习 babel 的原理的过程也会学到编译原理的一些知识。
除了作为转译工具外，babel 也经常用来做静态分析，分析代码，提取信息，然后用于生成文档、lint、type check 等，我们会用大量的实战案例，让你真正能够把 babel 的静态分析能力用起来。
实战部分包括：
自动国际化：自动完成代码的国际化，帮大家扩展下思路，你会发现 babel 原来还可以用来做一些对业务有意义的自动化的事情。
自动生成文档：自动生成 api 文档，不再需要手动去维护。
自动埋点：自动进行函数插桩，埋点是一种常见的函数插桩。
linter： 探索 eslint、stylelint 等 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 原理的前端开发者
- 想入门编译原理的工程师
Babel 插件通关秘籍相关推荐
- 想进美团不知道选哪个技术岗位？这里有一份通关秘籍！
春暖花开,美团春招已经启动,针对校招和社招开放了几千个职位,其中很大部分都是技术岗位. 随着互联网的高速发展,技术岗位在不断地细分,比如软件开发不仅分为前端和后端,前端会分为Web.iOS和Andro ...
- DVWA 1.9 通关秘籍
DVWA 1.9 通关秘籍 本文来源:i春秋社区-分享你的技术,为安全加点温度 DVWA (Dam Vulnerable Web Application) DVWA是用PHP+Mysql编写的一套用 ...
- ES6 import代码智能转换Babel插件: babel-plugin-imports-transform
babel-plugin-imports-transform ES6 import代码智能转换Babel插件,优化(webpack等)打包构建体积. Github地址: https://github. ...
- [转] 以 async/await 为例，说明 babel 插件怎么搭
你一定碰到过这些库 babel-polyfill 项目地址:https://github.com/babel/babel/blob/master/packages/babel-polyfill 通过两 ...
- 鹅厂算法大神干货实录，初赛通关“秘籍”还不赶快来GET！
2019腾讯广告算法大赛正火热进行中,今年大赛赛题"广告曝光预估"推陈出新,聚焦实际业务需求和技术创新实践应用,吸引了各界算法极客积极报名参与.为帮助选手在比赛中有更出色的发挥,5 ...
- 漫画影视化背后，IP成漫改的通关秘籍？
近年来网文IP影视化改编已经司空见惯了,但随着精品IP日渐匮乏,网改剧似乎也已经没有了太大的想象空间.而相比于已被大肆开垦的网文领域,漫画领域俨然还是一块有待挖掘的宝地.于是,比网文更能直观表现故事内 ...
- XSS-labs靶场通关秘籍(level 17-20)
XSS-labs靶场通关秘籍level 17-20 level 17 进入靶场,看到GET请求方式传递参数,直接上测试代码 <script " ' Oonn> 查看页面源码,发现 ...
- 电大计算机网考攻略,上海开放大学毕业通关秘籍
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 今天与大学分享一下上海开大的学习经验吧! 一.其实我想大家选择成人教育应该都是有相应的目的. 1.现在工作中的技能还可以,但学历还比较低,提升一下学历以后 ...
- while True learn()全金牌通关秘籍
以下为最初几关的金牌通关秘籍,不继续更的原因是:这个游戏本质上就是套着机器学习外壳的水管游戏,涉及知识点的内容仅有几篇推荐给你的文章,游戏核心不涉及机器学习. 所以想单纯学习机器学习的没必要玩这个游戏 ...
最新文章
- AI市场扩大催生多样化标注需求
- 连接时会提示oracle initialization or shutdown in progress
- PHP语法分析器：RE2C BISON 总结
- C++学习之路 | PTA乙级—— 1062 最简分数 (20 分)（精简）
- 记录第二次遇到ERROR! MySQL server PID file could not be found!
- 华为云文字识别服务产品优势、应用场景、典型案例和未来之路（OCR系列三）
- SAP PS 第19节 里程碑开票
- iOS12捷径最全整理（100多个捷径），包括抖音视频下载捷径，地图导航捷径等
- 传说中开场晕过去一千多人的迈克杰克逊演唱会，有生之年请看下这个视频
- strcmp, strcasecmp, memcmp
- 【Godot】一个节点发射器（泼水机）
- 修改Win7硬盘分区盘符出现“虚拟磁盘管理器-参数错误”
- 大数据不是你想有就能有，如何才能“狂拽炫酷吊炸天”
- 【网页制作】CSS基本选择器讲解（附讲解视频）
- dotnet OpenXML 文本 Kerning 字间距的作用
- 计算机学校迎新条幅,学校迎新条幅内容
- android 模拟器输入中文
- 分门别类刷leetcode——高级数据结构（字典树，前缀树，trie树，并查集，线段树）
- VSCode的配置和插件同步到多台电脑
- 【JS逆向】知乎请求头 _x-zes-96 webpack还原
热门文章
- CSS字体描边，黄金金属质感
- Bootstrap中CSS通用样式——排版，列表，代码，图片
- 除夕有6.88亿人使用微信红包；超2.5亿人集齐五福过福年；巴菲特成苹果第四大股东丨价值早报
- java简单表白的情话_感动的表白情话 简单表白的话
- iOS微信7.0.12发布！除了适配暗黑模式，还有这些新功能！
- html 调试502谷歌浏览器,谷歌浏览器网页提示Server Error 502 Bad Gateway
- 解决混合APP中网页缓存引起刷新不及时问题
- 中国数据中心行业价值分析及投资决策建议报告2021～2027年
- 高防服务器为什么那么贵
- c51单片机矩阵键盘1602计算器_单片机中用矩阵键盘实现计算器