认识
一、认识
Rollup 是一款基于 ES Module 模块规范实现的 JavaScript 打包工具，在前端社区中赫赫有名。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准ES6 Module。新的 ES6 Module 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。
二、特点
-
默认使用
ES6 Module模块:ES6版本的Javascript最终带来了import和export的语法（ES6 Module，译者注），该语法可以让我们在多个脚本中共享函数和数据。虽然这一语法标准已确定下来，但目前仅在较新的浏览器中可以使用，并且Node.js也尚未完成该标准的导入。有了Rollup，你现在就可以放心地使用新的模块标准来书写代码，并将其编译为当前被广泛支持的CommonJS、AMD以及IIFE风格等多种格式。也就是说，你可以用符合未来标准的代码来赢得当下广大用户的芳心和敬意 -
场景丰富的
Tree Shaking: 由于EsModule模块依赖关系是确定的，和运行时状态无关。因此Rollup可以在编译阶段分析出依赖关系，对AST语法树中没有使用到的节点进行删除，从而实现Tree Shaking。 -
广泛兼容
CommonJS模块:Rollup可以通过通过插件导入现有的CommonJS模块。为了确保你的ES模块能够尽快在Node.js和webpack等支持CommonJS格式的工具中可用，你可以使用Rollup将代码编译为UMD或CommonJS格式
三、问题
3.1 Vite、EsBuild、Rollup、Webpack 各自优势、特点?
Vite 是一个前端开发与构建工具。采用双引擎架构, 开发阶段使用 Esbuild + no-bundle 服务，生产环境用 Rollup 编译构建。Vite在开发阶段, Vite 项目的启动可以分为两步。第一步是依赖预构建,借助 Esbuild 超快的编译速度来做第三方库构建和 TS/JSX 语法编译, 第二步是 Dev Server 的启动, 基于浏览器原生 ESModule 的支持实现了 no-bundle 服务,实现开发阶段的 Dev Server, 进行模块的按需加载, 可以直接在浏览器中运行源码，无需事先打包。每一个文件请求进来都会经历一系列的编译流程，然后 Vite 会将编译结果响应给浏览器。Vite 生产环境借助 Rollup, 从 AST 解析的功能开始，完成代码的词法分析（tokenize）和语义分析（parse），实现模块依赖图和作用域链的搭建，并完成 Tree Shaking、循环依赖检测及 Bundle 代码生成
EsBuild 是基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以比传统工具快 10~100 倍, 可以将其他格式的模块转化为 EsModule
Rollup 是一款基于 ES Module 模块规范实现的 JavaScript 打包工具, 并且 Rollup 具有天然的 Tree Shaking 功能，可以分析出未使用到的模块并自动擦除。Rollup 可以直接处理 Es Modules , 对于 CommonJs 需要通过插件来转换。
Webpack: 同样作为前端开发与构建工具, 开发与生产环境打包逻辑相同, 从所有入口开始, 递归处理所有依赖, 会对所有模块进行打包操作。生成最终代码前, 根据模块中出现的特性依赖，补充相应运行时代码, 比如立即表达式 IIFE、Webpack runtime 运行时代码, 生成最终产物。Webpack 实现了一套自己的 CommonJS 规范, 在 Webpack 中, 每个模块都被包装在一个函数中, 这个函数接受一个对象, 这个对象有 exports、require、module 等属性, 通过这种方式实现了模块的隔离, 每个模块都有自己的作用域, 不会污染全局作用域。