一、前言 最近正好在学习 Webpack，觉得 Webpack 这种通过构建模块依赖图来打包项目文件的思想很有意思，于是参考了网上的一些文章实现了一个简陋版本的 mini-webpack，通过入口文件将依赖的模块打包在一起，生成一份最终运行的代码。想了解 Webpack 的构建原理还需要补充一些相关的背景知识，下面一起来看看。 二、背景知识 1. 抽象语法树（AST） 什么是抽象语法树？ 平时我们编写程序的时候，会经常在代码中根据需要 import 一些模块，那 Webpack 在构建项目、分析依赖的时候是
使用 npm 命令安装一下： npm install @babel/parser @babel/traverse @babel/core @babel/preset-env -D
市面上现在有很多bundler，最著名的就是webpack，此外常见的还有 browserify，rollup，parcel等。虽然现在的bundler进化出了各种各样的功能，但它们都有一个共同的初衷，就是能给前端引入模块化的开发方式，更好的管理依赖、更好的工程化。
有了这棵树，我们就可以通过操纵这颗树，精准的定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、优化、变更等操作。具体如下：
重回 “手写 SQL 编辑器” 系列。之前几期介绍了 词法、文法、语法的解析，以及回溯功能的实现，这次介绍如何生成语法树。
里边的一个核心功能就是transform，把js代码编程抽象语法树AST。只要变成抽象语法树后，后期的插件才能根据这个抽象语法树进行降级，转成es5。
Abstract Syntax Tree抽象语法树（通常被简写成AST）实际上只是一个解析树(parse tree)的一个精简版本。在编译器设计的语境中，"AST" 和 "语法树"(syntax tree)是可以互换的。
在之前的 通过debug搞清楚.vue文件怎么变成.js文件 文章中我们讲过了vue文件是如何编译成js文件，通过那篇文章我们知道了，template编译为render函数底层就是调用了@vue/compiler-sfc包暴露出来的compileTemplate函数。由于文章篇幅有限，我们没有去深入探索compileTemplate函数是如何将template模块编译为render函数，在这篇文章中我们来了解一下。
1、JS引擎主要对JS代码进行语法、语法等分析，通过编译器将代码编译成可行的机码，使计算机执行。
在webpack中，我们发现配置我们能天然的使用esmodule这种模块化语法，那大家有没有好奇过呢？他究竟是怎么实现的呢？下面一起来探究一下，webpack究竟是怎么解析打包esmodule语法的。
日常工作中，我们会碰到js代码解析的场景，比如分析代码中require了哪些包，有些什么关键API调用，大部分情况使用正则表达式来处理，可一旦场景复杂，或者依赖于代码上下文时，正则就很难处理了，这时候就要用到抽象语法树。常见的uglify、eslint、babel、webpack等等都是基于抽象语法树来处理的，如此强大，有必要好好了解一下。
前面写过一篇简单的 AST 抽象语法树的文章简述 AST 抽象语法树。今天来看一下在 babel 中是如何将 ES6 转换为 ES5 的 。
首先我们介绍一下本文的关键点：抽象语法树，它是以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。
大家好，我是欧阳！ 本文约3500+字，整篇阅读大约需要12分钟。 前言 我们每天都在用v-model，并且大家都知道在vue3中v-model是:model
JavaScript是一种脚本语言，常用于前端开发和后端服务器开发。在浏览器环境中，JavaScript的执行是由JavaScript引擎负责的。了解JavaScript引擎的工作原理，对于理解代码的执行过程、优化性能以及解决一些常见问题都非常有帮助。本文将深入探讨JavaScript引擎是如何解析和执行代码的，以及相关的优化技术和调试工具。
前面写过一篇简单的 AST 抽象语法树的文章 简述 AST 抽象语法树。今天来看一下在 babel 中是如何将 ES6 转换为 ES5 的 。
背景 开发维护规模较大的前端项目，难免时不时需要进行一些代码重构工作。举一个简单的 ?： 有一个 npm 包 an-npm-package-containing-constants，用于维护项目埋点时
在使用JavaScript开发过程中，虽然并不会直接与AST直接打交道，但许多打包相关的插件都会涉及到它，例如使用bable对代码进行转换，ts类型检查，语法高亮，使用UglifyJS来压缩代码，使用www.safekodo.com来进行代码混淆加密，css预处理器、elint、pretiier，等。有很多js模块我们不会在生产环境用到，但是它们在我们的开发过程中充当着重要的角色。所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上。等，实际这背后就是在对JavaScript的抽象语法树进行操作。
计算机只能执行二进制文件，但是如果人工使用二进制编写代码，无疑是非常困难的，需要付出巨大的成本。 学过 C++ 或者 Java 的都知道，使用这两种预约编写的源码文件要运行，必须先进行编译，编译就是将源码转成二进制的机器码的过程。 执行编译的工具是一个特殊的软件，我们叫它为编译器（Compiler）。 编译器识别代码中的词汇、句子以及各种特定的格式，并将他们转换成计算机能够识别的二进制形式，这个过程就是编译（Compile）。
12 | 栈空间和堆空间：数据是如何存储的？ 这节讲解的是JavaScript的内存机制。 首先，我们知道JavaScript是弱类型动态语言。 接着，JavaScript的数据类型一共是八种:Boolean｜ String ｜ Number | Undefined | Null | BigInt | Symbol | Object 前七种为基本数据类型，他们存在栈中，后一种为引用数据类型，它存在堆中。 13 ｜ 垃圾回收：垃圾数据是如何自动回收的？ 不同语言的垃圾回收策略 通常情况下，垃圾
什么是 AST？AST 是 Abstract Syntax Tree 的首字母的缩写，中文名称为：抽象语法树抽象语法树本质上就是一个 JS 对象，以字符串的视角，将 Html 标签 解析为 JS 对象渲染函数（h 函数），既是 AST 的产物，也是 vnode 的起源h('div', { attrs: { className: 'box' } }, [ h('ul', {}, [ h('li', {}, '1'), h('li', {}, '2'), h('l
无论是对于任何语言框架来说，编译部分的知识往往是隐藏在代码内部不为认知但又非常重要的知识。
minipack是一个小型的打包工具，作者ronami，用来解析打包工具的基本原理。代码中有相当多的注释，理解起来也非常容易。
JavaScript引擎分析 一． JavaScript简介 JavaScript是一种动态类型的脚本语言；在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。 JavaScript脚本语言具有以下特点: (1)脚本语言。JavaScript是一种解释型的脚本语言，是在程序的运行过程中逐行进行解释执行，不需要预编译。；而Java、C++等语
一．JavaScript简介 JavaScript是一种动态类型的脚本语言；在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。 JavaScript脚本语言具有以下特点: (1)脚本语言。JavaScript是一种解释型的脚本语言，是在程序的运行过程中逐行进行解释执行，不需要预编译。；而Java、C++等语言需要先编译后执行； (2)
在今年的Vue Conf 2024大会上，沈青川大佬（维护Vue/Vite 中文文档）在会上介绍了他的新项目Vue Vine。Vue Vine提供了全新Vue组件书写方式，主要的卖点是可以在一个文件里面写多个vue组件。相信你最近应该看到了不少介绍Vue Vine的文章，这篇文章我们另辟蹊径来讲讲Vue Vine是如何实现在一个文件里面写多个vue组件。
抽象语法树 (Abstract Syntax Tree) 是源代码语法结构的⼀种抽象表示，以树状描述编程语⾔的语法结构，每个节点表示源代码中的⼀种结构。AST常用于代码语法检查、⻛格检查、格式化、代码提示、混淆压缩、自动补全等，还可以用来优化代码结构，如 webpack 以及 CommonJS、AMD、CMD、UMD等代码规范之间的转化等。
JS加密、JS混淆、JS混淆加密，所指相同，都是指对JS代码进行加密式处理，使代码不可读，以达到保护代码的目的。
“如果你不知道编译器咋工作的你就不知道电脑是咋工作的。” -- STEVE YEGGE
源代码首先通过解析器解析成 AST ，然后 AST 再通过解释器解释成最终的字节码
抽象语法树（Abstract Syntax Tree）简称 AST，是源代码的抽象语法结构的树状表现形式。webpack、eslint 等很多工具库的核心都是通过抽象语法书这个概念来实现对代码的检查、分析等操作。今天我为大家分享一下 JavaScript 这类解释型语言的抽象语法树的概念
Next-generation ES module bundler官网定义此为下一代ES模块捆绑器。
高级语言最终都需要编译为低级语言才能被硬件执行，越高级的语言中间的转换时间越长，效率越低，越低级的语言执行素的越快，但是由于缺少高级语言便捷的语法特性所以很难编写代码。
Babel 使用 @babel/parser 解析代码，输入的 js 代码字符串根据 ESTree 规范生成 AST（抽象语法树）
计算机不能直接理解高级语言，只能直接理解机器语言，所以必须要把高级语言翻译成机器语言，计算机才能执行高级语言编写的程序。根据语言的执行流程，可以把语言分成编译型语言和解释型语言。
webpack可以说是目前最火的打包工具，如果用不好他，真的不敢说自己是个合格的前端工程师
众所周知，Kotlin团队正在开发新版Kotlin编译器，并命名为K2。那么K2又是什么意思呢？难道是Kotlin第二版编译器的意思？
Golang 是一门需要编译才能运行的编程语言，也就说代码在运行之前需要通过编译器生成二进制机器码，随后二进制文件才能在目标机器上运行，如果我们想要了解 Go 语言的实现原理，理解它的编译过程就是一个没有办法绕过的事情。
JS 实在是太酷了（认真脸），那你有没有想过机器是怎么解析 JS 代码的？作为一个 JS 开发者，一般我们不需要直接跟编译器打交道，但是如果可以了解其中的基本原理，相信会对以后的工作和学习都有帮助的！
在开发中，你是否会为了系统健壮性，亦或者是为了捕获异步的错误，而频繁的在 async 函数中写 try/catch 的逻辑？
本文会带你简单的认识一下webpack的loader，动手实现一个利用md转成抽象语法树，再转成html字符串的loader。顺便简单的了解一下几个style-loader，vue-loader，babel-loader的源码以及工作流程。
随着前端复杂度的不断提升，诞生出很多打包工具，比如最先的grunt，gulp。到后来的webpack和Parcel。但是目前很多脚手架工具，比如vue-cli已经帮我们集成了一些构建工具的使用。有的时候我们可能并不知道其内部的实现原理。其实了解这些工具的工作方式可以帮助我们更好理解和使用这些工具，也方便我们在项目开发中应用。
Vue.js是一款流行的JavaScript框架，它采用了基于组件的开发模式，使得前端开发更加简单和高效。而Vue的核心功能之一就是模版解析，它负责将Vue组件中的模版代码转化为可执行的JavaScript代码。本文将深入探讨Vue模版解析的作用、核心源码分析以及总结。
接触了前端这么久以来，你每天跟JS打交道，你肯定也和我一样认为JavaScript很酷。但机器怎么能真正理解你写的代码呢？
代码地址：https://github.com/reactjs/react-codemod
大家好，这里是 菜农曰，欢迎来到我的频道。我们今天的主题是 AST （抽象语法树）
本文不再介绍Babel是什么也不讲怎么用，这类文章很多，我也不觉得自己能写得更好。这篇文章的关注点是另一个方面，也是很多人会好奇的事情，Babel的工作原理是什么。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
