前端构建工具系列

rollup plugin 这篇文章读读改改，终于和大家见面啦。 讲道理，稀里糊涂直接看源码分析只会分分钟劝退我，而我只想分分钟写个 rollup 插件而已~~

vite 是基于浏览器支持 ESM 模块，，目前已支持vue、react、Svelte、Solid等主流框架，相信不少同学已经开始使用,并体验到“飞一般”的体验啦，下面我们来看看vite是如何支持

前言 我们在实际开发中，经历过许多次的模块共享的场景。最常见的场景例如我们将代码封装后根据版本和环境的不同发布到公共平台或者私有平台，供不同项目进行使用，npm 工程化就是其中最日常的实践。

在我们编写业务代码的时候，可能很少人会使用到AST，以至于大多数同学都不大了解AST。有的同学曾经学过，但是不去实践的话，过段时间又忘的差不多了。看到这里，你会发现说的就是你。听说贵圈现在写文章

本文讲述的最佳实践是从日常业务中总结而出的，不一定适合所有项目。毕竟每个公司或个人的项目不同，最佳实践也会有所不同。但是可以从这篇文章借鉴吸收一点有用的东西，有问题的地方也欢迎大家积极吐槽指正。

Vue2系统迁移Vite作为开发工具，将会以内部系统作为案例改造, 开发用 vite，生产依旧保持 webpack。

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级

众所周知，原本不支持 tree-shaking 的 Webpack 在它的 2.x 版本也实现了 tree-shaking，好奇心又来了，rollup 从一开始就自实现了 tree-shaking，而

本文将整理vite静态资源的几种处理方式，应用案例和源码分析相结合，带你10mins通关该模块知识。

loader 干啥的？ 也就是说，webpack 把任何文件都看做模块，loader 能 import 任何类型的模块，但是 webpack 原生不支持譬如 css 文件等的

tapable 是一个类似于 Node.js 中的 EventEmitter 的库，但更专注于自定义事件的触发和处理。webpack 通过 tapable 将实现与流程解耦。

在使用Webpack Dev Server以后 可以让我们在开发工程中 专注于 Coding， 因为它可以监听代码的变化 从而实现打包更新，并且最后通过自动刷新的方式同步到浏览器，便于

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

Webpack 的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务快速开发我们的应用（而不是每次 coding 完，手动执行 run build，全量打包），大家只需在

而今，只要是工程化的项目，大多离不开 sourcemap 的身影，一言蔽之：构建处理前的代码和处理后的代码之间的桥梁。但却很少有同学真的去深入了解它的运作原理。

从 Webpack2.x 通过插件逐步实现 tree-shaking，到最近炙手可热的 Vite 构建工具也借助了 rollup 的打包能力，众所周知 Vue 和 React 也是使用 rollup

分析 Vite version：2.2.3，和我来一场 vite server 探寻之旅吧~(*❦ω❦)

webpack 简易实现。本文最终实现的简易版 vite 可通过github 地址下载，代码实现地较为简单，可运行后再看此文。