原文：https://indepth.dev/under-the-hood-of-type-systems/
如果你查看目前任何主流的项目中的 devDependencies，我们不会在生产环境用到，但是它们在开发过程中充当着重要的角色。归纳一下有：javascript转译、代码压缩、css预处理器、elint、pretiier，postcss等。所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上，都是 AST 的运用：
[011ead2e167b86d1d4def84147fbbdf6c6bb1c01.jpg] 最近看到掘金、前端公众号好多 ES2020 的文章，想说一句：放开我，我还学得动！ 先问大家一句，日常项目开发中你能离开 ES6 吗？ 一、前言 对于前端同学来说，编译器可能适合神奇的魔盒🎁，表面普通，但常常给我们惊喜。 编译器，顾名思义，用来编译，编译什么呢？当然是编译代码咯🌹。 [20191125-144728-7a47.gif] 其实我们也经常接触到编译器的使用场景： React 中 JSX 转换成
先问大家一句，日常项目开发中你能离开 ES6 吗？ 一、前言 对于前端同学来说，编译器可能适合神奇的魔盒?，表面普通，但常常给我们惊喜。 编译器，顾名思义，用来编译，编译什么呢？当然是编译代码咯?。
Babel 是 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做“转换编译器（transpiler）”。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。
这个文章系列将带大家深入浅出 Babel, 这个系列将分为上下两篇：上篇主要介绍 Babel 的架构和原理，顺便实践一下插件开发的；下篇会介绍 babel-plugin-macros , 利用它来写属于 Javascript 的宏，
抽象语法树（Abstract Syntax Tree），简称 AST，初识 AST 是在一门网页逆向的课程，该课程讲述了 js 代码中混淆与还原的对抗，而所使用的技术便是 AST，通过 AST 能很轻松的将 js 源代码混淆成难以辨别的代码。同样的，也可以通过 AST 将其混淆的代码 还原成执行逻辑相对正常的代码。
AST 是一个非常基础但是同时非常重要的知识点，我们熟知的 TypeScript、babel、webpack、vue-cli 都是依赖 AST 进行开发的。本文将通过 AST 与前端工程化的实战向大家展示 AST 的强大以及重要性。
通过生成语法树(AST)，可快速修改代码中的一些混淆处理，从而简化代码，便于后续分析。
目录: 一、为什么要对JS代码进行保护？ 二、js代码保护前世今生 三、js虚拟保护方案与技术原理 四、总结
不知道你是不是和我一样，看到“编译器”三个字的时候，就感觉非常高大上，同时心底会升起一丝丝“害怕”！
在前端面试的过程中，前端工程化一直是考察面试者能力的一个重点，而在我们常用的项目打包工具中，无论是webpack还是rollup，都具备一项很强大的能力——tree-shaking，所以面试官也常常会问到tree-shaking的原理是什么，这时我们该如何回答呢？其实核心原理就是AST。
如果对这两个概念不熟悉，这里有个简单的示例。假设我们有两个方法add和subtract，它们可能会被写成这样。
前端精读已经写到第 123 篇了，大家已经不必担心它突然停止更新，因为我已养成每周写一篇文章的习惯，而读者也养成了每周看一篇的习惯。所以我想说的其实是一种更有生命力的自媒体运作方式，定期更新。一个定期更新的专栏比一个不不定期更新的专栏更有活力，也更受读者喜爱，因为读者能看到文章之间的联系，跟随作者一起成长。个人学习也是如此，养成定期学习的习惯，比在培训班突击几个月更有用，学会在生活中规律的学习，甚至好过读几年名牌大学。
最近在尝试玩一玩已经被大家玩腻的 Babel，今天给大家分享「如何用 Babel 为代码自动引入依赖」，通过一个简单的例子入门 Babel 插件开发。
今天我们一起动手写一个编译器，但不是我们平常所说的编译器，而是一个超级超级小的编译器，小到如果你把本文件的所有注释都删了，真正的代码也就200多行。
前言：做基础技术的时候，会经常碰到一个问题就是如何让自己提供的代码对用户少侵入，无感。比如我提供了一个 SDK 收集 Node.js 进程的 HTTP 请求耗时，最简单的方式就是给用户提供一个 request 方法，然后让用户统一调用，这样我就可以在 request 里拿到这些数据。但是这种方式很多时候并不方便，这时候我们就需要去 hack Node.js 的 HTTP 模块或者给 Node.js 提 PR。在操作系统层面，有提供很多技术解决这种问题，比如 ebpf、uprobe、kprobe。但是应用层无法使用这种技术解决我们的问题，因为操作系统的这些技术针对的是底层的函数，比如我想知道一个 JS 函数的耗时，只能在 V8 层面或者 JS 层面去解决，V8 这方面似乎也没有提供很好能力，所以目前我们更多是考虑纯 JS 或者 Node.js 内核层面。本文介绍一些一种在 JS 层面 hack 用户代码的方式。
谈及 Babel,必然离不开 AST。有关 AST 这个知识点其实是很重要的，但由于涉及到代码编译阶段，大多情况都是由各个框架内置相关处理，所以作为开发(使用)者本身，往往会忽视这个过程。希望通过这篇文章，带各位同学走进 AST，借助 AST 发挥更多的想象力。
导读：本文以JavaScript计算机编程语言为载体，从执行过程去解析它的运行原理，从编译的角度去解析它的结构，最后以AST和产生式作为切入点进行案例分析，目的是为了让读者从更底层去了解计算机编程语言。
已经9102了，我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说，可能和它们还不够熟悉，我们得让浏览器理解它们，这就需要 Babel。
AST (Abstract Syntax Tree(抽象语法树)) 是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构。它由一堆节点（Node）组成，每个节点都表示源代码中的一种结构。不同结构用类型来区分，常见的类型有： Identifier(标识符)，BinaryExpression(二元表达式)，VariableDeclaration(变量定义)，FunctionDeclaration(函数定义)等。
TypeScript 是一门基于 JavaScript 拓展的语言，它是 JavaScript 的超集，并且给 JavaScript 添加了静态类型检查系统。TypeScript 能让我们在开发时发现程序中类型定义不一致的地方，及时消除隐藏的风险，大大增强了代码的可读性以及可维护性。相信大家对于如何在项目中使用 TypeScript 已经轻车熟路，本文就来探讨简单探讨一下 TypeScript 是如何工作的，以及有哪些工具帮助它实现了这个目标。
通过一个demo带你深入进入webpack@4.46.0源码的世界，分析构建原理，专栏地址，共有十篇。
在编程时，我们会初始化一个变量，给变量赋初值，例如下面语句： let x = 5*5; 上面代码被编译器解读后，变量x就会和数值25绑定在一起。下次使用到变量x时，编译器会读取它绑定的值，然后用于相关代码的执行，例如下面代码： let y = x + 5; 编译器执行上面语句后，变量y就会跟数值30绑定起来，本节我们就先增加变量绑定的功能。 变量绑定功能不难实现，我们只要创建一个哈希表，把变量名和它对应的数值关联起来即可，于是我们在MonkeyEvaluator.js中增加如下代码： class Envir
后来花了一些时间整理了下思路，那么如何实现给所有的async函数添加try/catch呢？
在本系列的前两篇文章中，我们已经讨论了很多关于代码风格检查的内容，所以我认为是时候给eslint一个应有的关注了。总的来说，eslint非常灵活，甚至可以将解析器完全替换成另一个不同的解析器。随着JSX和TypeScript的兴起，这种情况并不少见。得益于丰富的插件和预设生态系统，可能已经有了适用于每个使用场景的规则，如果还没有，优秀的文档会指导你如何创建自己的规则。
虽然 Babel 团队在各种哭穷，但是 Babel 始终是我们前端在开发中不可或缺的重要工具。 虽然我们只是 API 调用工，但是多了解一些总是会有好处的嘛 ☄️☄️☄️
简单地说，Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。
抽象语法树（Abstract Syntax Tree，AST），是源代码（不仅限于JavaScript，同时还应用于其他语言，例如: Python，Rust等）语法结构的⼀种抽象表示。它以树状的形式表现编程语⾔的语法结构，树上的每个节点都表示源代码中的⼀种结构。 AST 运⽤⼴泛，⽐如：
抽象语法树（Abstract Syntax Tree，AST），是源代码（不仅限于JavaScript，同时还应用于其他语言，例如: Python，Rust等）语法结构的⼀种抽象表示。它以树状的形式表现编程语⾔的语法结构，树上的每个节点都表示源代码中的⼀种结构。
Babel is a JavaScript compiler！这是Babel官方对于babel的定义。身为前端工程师，因此有必要了解编译原理，幸运的是，“The Super Tiny Compiler”开源项目利用JavaScript写了一个简单的编译器。
有这样一种技术，可以把用高级语言编写的非 Web 程序转换成为 Web 准备的二进制模块，而无需对 Web 程序的源代码进行任何更改即可完成这种转换。浏览器可以有效地下载新翻译的模块并在沙箱中执行。执行的 Web 模块可以与其他 Web 技术无缝地交互 - 特别是 JavaScript（JS）。欢迎来到WebAssembly。
最近遇到了一个很特殊的需求，业务代码打包后需要运行在两个不同的环境中，而两个环境中的属性有非常多的差异，我想在打包阶段来处理这些差异，所以就需要自定义一个loader来处理设计到的相关文件
jscodeshift 是一个工具包，用于在多个 JavaScript 或 TypeScript 文件上运行 codemods，它是：
今天，又双叒叕yòu shuāng ruò zhuó开辟了一个新的领域--「TypeScript实战系列」。
https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript
TypeScript 是 Microsoft 开发的JavaScript 的开源超集，用于在不破坏现有程序的情况下添加附加功能。
JavaScript 中的每个值会随着我们执行不同的操作表现出一系列的行为。这听起来很抽象，看下面的例子，考虑一下针对变量 message 可能执行的操作：
TypeScript 2.3 引入了一个新的--downlevelIteration标志，为以 ES3 和 ES5 目标添加了对 ES6 迭代协议的完全支持。for...of循环现在可以用正确的语义进行向下编译。
AST (Abstract Syntax Tree(抽象语法树)) 是源代码语法结构的一种抽象表示。不了解 AST 的，可以看这篇文章。
目前babel不管是从生态上还是文档上比esprima要好很多，因此推荐大家使用babel工具，本文示例也使用babel来做演示。
babel 本质上是个编译器，所以它所做的基本上就是编译器要做的事，为了避免对编译器的某些东西讲的太细，我们重点只要知道 babel 的工作流程就行了。
今天，微软在其官方博客宣布：TypeScript 3.9 版本已经正式发布，详情见下文。
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。
领取专属 10元无门槛券
手把手带您无忧上云
