1.和昊昊聊前端转译器之parser综合篇
2.带你揭开神秘的源码 javascript AST 面纱之AST 基础与功能
3.web前端开发学习_掘金前端课程(小册)推荐
4.微信小程序接入lottie动画

和昊昊聊前端转译器之parser综合篇

       昊昊，你了解前端领域的分析转译器吗？

       昊昊：转译器（transpiler）在前端领域用途广泛，比如babel、源码typescript、分析terser、源码eslint、分析rsync源码包安装prettier、源码postcss、分析posthtml、源码vue template compiler等。分析

       我：这些转译器包括了大部分，源码还有像taro、分析uniapp这样的源码基于上述转译器的小程序转译器。当然，分析也有用rust写的源码类似babel的swc，以及用go写的esbuild自带的js transpiler，这些不是js写的，我们先不讨论。

       昊昊：转译器的实现原理是什么？

       我：转译器是源码转源码，大致分为三个步骤：parse、transform、generate。

       第一步，parse，将源码解析为抽象语法树AST，通过树形结构记录源码信息，以便计算机理解。

       第二步，transform，解析源码后，进行各种转换，转译器主要工作是转换，对AST进行目的不同的增删改。

       第三步，generate，转换后的AST进行递归打印，生成新的代码，并生成源码和目标源码关联关系的sourcemap。

       虽然三个阶段大同小异，但具体名字可能不同，例如vue template compiler中将transform称为optimize，强调优化渲染的转换；postcss第三步被称为stringifier。

       昊昊：你能详细讲讲parse、transform、generate三个阶段吗？

       我：当然，转译器都分为这三个阶段，我们换个角度，分别深入分析parse、大发邀请码源码transform、generate这三个阶段，纵向对比各种转译器的实现。

       先从JS Parser开始。昊昊，你认为为什么用JS写JS Parser？

       昊昊：是因为前端工程化，有了node后，可以用js写js代码的工具链，包括语法转换、压缩混淆、打包工具等，这些都需要Parser的支持。

       我：确实，工程化工具链驱动了Parser的需求。最早的JS写的Parser是esprima，当时Mozilla公布了SpiderMonkey JS引擎的Parser API和AST标准。esprima基于此实现了Parser。后来形成了estree标准，这是对SpiderMonkey AST的兼容和扩展，最早的实现是esprima。Terser文档中将其称为SpiderMonkey AST。

       昊昊：SpiderMonkey API是参照物，estree是对它的兼容和扩展，最早的实现是esprima。

       我：对，有了esprima这个Parser，许多JS转译工具可以基于它进行开发，比如eslint。eslint早期基于esprima，发展顺利。但随着JS到ES6后，更新速度加快，esprima更新跟不上，导致eslint用户频繁抱怨。于是eslint fork了一份esprima，扩展语法，形成espree，espree自立门户，但也遵循estree标准。后来社区迎来了更快的JS Parser，如acorn，它速度更快，支持新语法，并且支持插件扩展，全面超越了esprima。因此，大量之前基于esprima的拐点计算c 源码工具改用acorn，其中当然包括eslint，在espree2.0后，底层的Parser实现改为acorn。

       acorn的插件机制允许开发者扩展新语法，比如创建一个关键字ssh，实现ssh;使用，这需要注册关键字、注册新语法类型，并在Parser中覆盖相关方法。实现方式并不复杂，完整代码展示了这一过程。

       昊昊：acorn可以扩展新语法，是怎么实现的？

       我：通过acorn插件实现新语法扩展，插件是一个函数，接受旧Parser，返回继承旧Parser的新Parser。新Parser通过重写方法实现扩展。这里以ssh关键字为例，首先修改构造器注册ssh关键字，然后在Parser中注册新语法类型。在parse逻辑中判断是否处理ssh关键字，并进入自定义解析逻辑。实现新语法扩展并不难。

       昊昊：acorn插件机制很棒，还能扩展新语法。除了acorn，还有其他JS Parser有插件机制吗？

       我：印象中没有，如esprima、typescript等没有语法插件，这种扩展只能等待官方实现。

       昊昊：babel、espree等基于acorn，它们做了哪些改动和扩展？

       我：espree仅增加了一些属性，保持estree兼容性。而@babel/parser除了添加节点属性，还扩展了许多新节点，不兼容estree标准，主要修改包括新增节点定义、属性添加等。

       昊昊：其他JS转译器，如prettier、terser的Parser是什么？

       我：prettier基于@babel/parser和typescript，terser有自己的AST标准。terser使用自己标准的原因是其AST方法丰富，有继承关系，而estree标准的AST仅是数据结构。改动成本大，源码科技城所以terser没有改变。详细原因可以查看官方文章。

       昊昊：其他转译器的Parser？

       我：CSS转译器流行的是postcss，用于增强CSS能力的less、sass等与postcss这类专业转译器定位不同。postcss支持插件机制，默认支持CSS语法扩展。接下来在postcss语法插件中应用一个acorn语法插件，实现CSS支持新JS语法。

       昊昊：把JS新语法编译到CSS，很酷。

       我：不仅是Parser，stringifier也能自定义，比如实现语法高亮等。

       昊昊：HTML的Parser呢？

       我：HTML的Parser与CSS类似，支持各种模板引擎编译为HTML。主要转译器是postcss，其Parser使用htmlparser2。流程与postcss相似，但不支持语法扩展插件，仅支持转换插件。可以拿到某个节点后获取内容，自行解析生成HTML AST，如Markdown转HTML、模板引擎转HTML等。

       昊昊：感觉Parser种类繁多，既有acorn、htmlparser2、postcss等通用Parser，也有各种转译器自带的Parser。

       我：学习时不要只关注使用，了解Parser类型拓宽视野。深入学习Parser需要理解词法分析和语法分析，而不是学习某个Parser的使用。通常不会手写复杂的Parser，比如HTML Parser，可以用如ANTLR的Parser生成器。

       转译的开始在解析阶段，之后的转换与生成才是重头戏。

带你揭开神秘的 javascript AST 面纱之AST 基础与功能

       在前端开发中，AST（抽象语法树）是一个关键概念，几乎所有框架都是基于AST进行改造和运行。理解AST的基础与功能对于开发者至关重要。以下内容将带你深入了解AST，并探讨其在代码编译、跨端运行及代码改造中的应用。

       AST基础与功能

       AST是溯源码怎么修改前端开发中不可或缺的元素，几乎所有框架如React、Vue、Taro等，都依赖于AST进行代码优化和执行。多端应用的开发离不开对AST概念的掌握。

       通过手写简单的编译器，我们可以将JavaScript代码编译为浏览器能够识别的格式。实现自定义编译器后，开发者能够设计新的框架，最终目标是将编译后的代码转换为浏览器可执行的JavaScript、CSS和HTML。

       翻译过程是关键，将原始代码转换为浏览器能够执行的代码。这一过程不仅可以实现代码的跨平台运行，还能创建新的框架。个人开发者可以通过团队合作，解决各种问题，实现跨端框架的开发。

       分析器

       在深入讨论AST之前，我们需要了解分析器的概念，它是编译原理的核心。分析器负责解析代码，识别关键词、符号等元素。词法分析器（Lexical analyzer）通过扫描代码，将其转换为有意义的序列（Tokens），为后续语法分析做准备。

       语法分析器（Syntactic analyzer）则负责解析这些Token，构建代码的结构，如语法分析树或抽象语法树（AST）。这一步骤对于理解代码逻辑至关重要。

       以JavaScript为例，通过分析器处理后的代码转换为AST，使得机器能够理解并执行。

       抽象语法树（AST）

       AST是代码解析的核心结果，它将源代码结构化为树状表示形式。在语言领域，AST可以视为语法分析树，它直观地展示了代码的结构和逻辑。

       例如，分析“我写文章”这句话时，AST会将其分解为主语、谓语、宾语等元素，帮助理解和解析。

       在JavaScript中，AST提供了代码原子化的表示，便于机器理解。通过AST，我们可以清晰地看到变量声明、函数定义等元素的结构，使代码解析过程更加直观。

       AST的应用与用途

       1. **自定义语法分析器**：开发者可以基于现有AST，设计自定义语法分析器，将特定语言转换为JavaScript，进而生成DOM节点、函数等。

       2. **跨端运行**：利用AST实现代码翻译，支持在多种平台上运行。例如，Taro和uni-app等框架能将代码自动适配到H5、小程序等环境。

       3. **代码改造与预编译**：通过分析AST，实现代码混淆、模块化、自动引入、版本兼容等增强处理，提高代码质量。

       AST的应用实践

       在框架改造与适配中，理解和使用AST至关重要。通过分析代码结构，开发者可以实现高效代码替换、配置读取与修改、文件重写等操作。掌握这些方法后，开发者能够更灵活地进行代码改造，提高开发效率与代码质量。

web前端开发学习_掘金前端课程(小册)推荐

       大家好，以下是推荐的前端掘金课程（小册）列表，适合前端初学者及工作几年的开发者，内容详细且由一线大厂员工编写。

1. React 进阶实践指南

       本课程深入讲解 React 基础与高级用法，结合实践示例，帮助您克服技术瓶颈，实现进阶。内容将随 React 版本更新而持续更新，包括 React 系列。

       作者：在一线互联网大厂工作七年，有六年 React 开发经验，通读 React 源码，撰写多篇《React 进阶》系列文章。

       点击进入学习

2. 前端面试之道

       构建全面的前端知识体系，深入探究技术原理，掌握大厂面试中常考知识点。一年磨一剑，精心打造。

       作者：yck，四年前端工程师，经历了从小厂到大厂的面试过程，专注于前端基础设施及架构领域，目前在新加坡某公司任职 Senior Software Engineer。

       点击进入学习

3. 剖析 Vue.js 内部运行机制

       以简单易懂的方式带领读者探索 Vue.js 的世界，通过小 Demo 抽象原理，形成简易版 Vue.js 实现，帮助理解核心概念。

       作者：某外企前端 Leader，前阿里巴巴、滴滴出行和创业团队的前端工程师。

       点击进入学习

4. 前端性能优化原理与实践

       深入理解前端性能优化的原理，将晦涩的知识转化为实践技能，建立个人优化技能库。

       作者：一线电商集团前端工程师，拥有丰富的研发、面试和性能优化经验。

       点击进入学习

5. JavaScript 设计模式核心原理与应用实践

       以易于理解的方式介绍编程“套路”，引导读者深入理解设计模式原理，并在实际场景中应用。

       作者：修言，曾为《前端性能优化原理与实践》小册作者，现为一线电商集团前端工程师。

       点击进入学习

6. 小程序云开发入门到实践

       零基础学习小程序开发和腾讯云云开发知识，实践完成完整小程序项目，适合初学者。

       作者：李东bbsky，腾讯云云开发布道师，致力于普及互联网技术技能。

       点击进入学习

7. Taro 多端开发实现原理与项目实战

       详细解析 Taro 多端开发框架，通过电商核心项目的实战，帮助开发者快速上手多端项目。

       由凹凸实验室的多名开发工程师联合编写，他们来自 Taro 核心开发者、多款小程序的开发者。

       点击进入学习

8. 前端算法与数据结构面试：底层逻辑解读与大厂真题训练

       面向实战的前端算法面试教学，通过接地气的解释和大量图解，构建算法能力体系。

       点击进入学习

9. Web 前端面试指南与高频考题解析

       适合应届毕业生和计划跳槽的前端开发者，提供面试技巧和高频考题解析。

       点击进入学习

. React Hooks 与 Immutable 数据流实战

       以实战为导向，深入探索 React 开发中的设计模式与性能优化策略，打造完整前端工作流。

       点击进入学习

. babel 插件通关秘籍

       深入学习 babel 编译原理，掌握编写任何 babel 插件的技能，包括基础、进阶、实战和简易 babel 实现。

       作者：某一线大厂前端工程师，公众号[神光的编程秘籍]维护者，对编译原理有深入研究。

       点击进入学习

. 大厂 H5 开发实战手册

       由京东凹凸实验室的资深前端工程师编写，提供 H5 开发和 UI 开发的实战技巧，适合应聘大厂 H5 开发或 UI 开发职位的开发者。

       点击进入学习

. TypeScript 全面进阶指南

       深入探讨 TypeScript 的应用，提高代码的健壮性、可读性，提升开发效率和体验。

       作者：阿里巴巴前端开发工程师，热衷于分享和推广 TypeScript 相关知识。

       点击进入学习

. 玩转 CSS 的艺术之美

       深入 CSS 技巧，提供大量骚操作示例，提升审美标准和艺术创作能力。

       作者：资深前端工程师，网易互动娱乐事业群成员，负责前端工程化和架构设计。

       点击进入学习

. 深入浅出 Vite

       系统学习 Vite 构建工具，提升前端工程化能力，全面掌握构建生态和底层原理。

       作者：前端工程化领域专家，曾将 Vite 应用于抖音直播等大型业务，同时也是 Vite Contributor。

       点击进入学习

. TypeScript 类型体操通关秘籍

       掌握 TypeScript 类型体操的六大技巧，成为类型编程高手，涵盖类型系统和实战案例。

       作者：前阿里架构组前端工程师，对前端编译原理有深入研究。

       点击进入学习

. React 实战：设计模式和最佳实践

       深入了解 React 应用设计模式和最佳实践，包括 Suspense 和 Hooks 的应用。

       点击进入学习

. 前端调试通关秘籍

       掌握 VSCode Debugger、Chrome DevTools 和 Charles 等调试工具，提升调试能力。

       点击进入学习

. Webpack5 核心原理与应用实践

       从工程搭建、构建性能优化到 Loader 和 Plugin 开发，深入剖析 Webpack 执行原理。

       作者：字节跳动前端工程师，重度帝王蟹爱好者，对前端工程化有深入研究。

       点击进入学习

. WebGL 入门与实践

       介绍 WebGL 和 CSS 3D 开发技巧，演示 3D 数学库在 Web 开发中的作用。

       点击进入学习

. Vue3 企业级项目实战

       围绕 Vue3、Element Plus 和 Spring Boot 开展的完整企业级项目开发实战。

       点击进入学习

. 基于 Vite 的组件库工程化实战

       探索 Vite 在组件库工程化中的应用，提升项目开发效率。

       点击进入学习

. 从前端到全栈

       通过 Node.js 从前端角度体验全栈开发，涵盖工具脚本、HTTP 服务、工程化和跨平台开发。

       点击进入学习

. NestJS 项目实战

       学习使用 NestJS 构建高效、可扩展的 NodeJS 服务端应用。

       点击进入学习

. Vue 商城项目开发实战

       完成一个完整 Vue 商城项目的开发，包含技术讲解和实战。

       点击进入学习

. 基于Node的DevOps实战

       通过实践项目深入 DevOps 工程，包括开发、测试、构建和部署。

       点击进入学习

. 区块链开发入门：从0到1构建基于以太坊智能合约的ICO DApp

       为前端开发者提供区块链开发基础，通过 DApp 实战掌握区块链技术。

       点击进入学习

. Uniapp从入门到进阶

       全面讲解跨平台应用开发，包含 Uniapp 常用知识点、基础 API、前端交互、组件封装、后端 Nodejs 开发、前后端联调和优化部署。

       点击进入学习

. 现代 Web 布局

       基于 Web 开发需求，探索现代布局技术，适应不同设备和场景。

       点击进入学习

. 深入剖析 Node.js 底层原理

       从源码角度解读 Node.js 设计，实现简易 JS 运行时，提升 Node.js 技能。

       点击进入学习

微信小程序接入lottie动画

       要实现微信小程序展示Lottie动画，需要遵循以下步骤和注意事项。

       Lottie动画是由Airbnb开发并开源的动画库，允许设计师将复杂的矢量动画导出为JSON文件，然后通过Lottie库在移动应用和Web上无缝渲染。动画可在iOS、Android和Web等多个平台上使用，且以高性能和高质量呈现。

       Lottie与GIF和Canvas动画的主要区别在于其更高的灵活性和动态性，以及更小的文件大小。在小程序中引入Lottie，首选Lottie-miniprogram库，可通过链接获取。然而，该库可能不总是同步更新Lottie-web版本，对于复杂需求，建议直接查看源码，自行适配。

       在使用Taro进行工程开发时，可使用React进行代码编写。初始化Canvas载体时，需创建一个canvas元素，并将其type属性设置为2D。随后，存储canvas实例的函数应被定义，以便后续操作。

       加载Lottie动画，通常在页面onReady或canvas元素onReady时进行，使用Lottie库加载动画。若使用React，可通过useEffect执行此操作。同时，需注意小程序中Lottie-miniprogram库的path支持在线地址，而非本地路径，这与Lottie-web的灵活性形成对比。解决方法是研究如何在本地存储动画数据。

       为组件提供启动动画的方法，通常通过forwardRef实现，并在组件内部暴露启动和监听动画播放结束的方法，根据实际业务需求选择监听complete或enterFrame事件。

       若需将本地路径用于动画路径，可直接使用Lottie的animationData属性，将动画JSON数据复制到本地文件中保存。

       在canvas渲染动画时，可能会遇到失真问题。为解决此问题，可在获取canvas时进行放大和缩小操作，按照放大后的尺寸渲染，再调整至原始大小。这可以通过调整initCanvas函数实现。

       当在canvas渲染动画层级较高，导致弹窗显示不全时，可能在模拟器中遇到问题，但在实际线上版本中不会。这可能需要在组件设计时考虑动画的层级和布局，以确保正确显示。

       遵循以上步骤和注意事项，即可成功在微信小程序中展示Lottie动画。