Vite 学习（三） - rollup & esbuild 基础学习

最新推荐文章于 2024-08-22 14:21:56 发布

weixin_41364787

最新推荐文章于 2024-08-22 14:21:56 发布

阅读量3.7k

点赞数 2

分类专栏：与前端沾边文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/weixin_41364787/article/details/122904173

版权

本文介绍了Rollup和esbuild的基础知识，包括它们的常用命令、配置文件、插件机制。重点讲解了Rollup的tree shaking特性以及esbuild的编译目标和格式选项。还探讨了在开发中如何使用和配置这两个工具的插件，以实现更高效、优化的前端构建过程。

摘要由CSDN通过智能技术生成

本小节介绍下 rollup 和 esbuild 的基础用法，我们都知道 vite 本身使用的 rollup 打包，vite 的插件也和 rollup 的插件机制相吻合； esbuild 是用于在开发环境中对文件进行处理，也有自己的声明周期钩子函数，由于对文件的分割和 css 支持还不太友好，暂未应用到打包环节。

rollup

rollup 是成熟的构建工具，开源类库优先选择，以 esm 标准为目标的构建工具，package.json 中提供了 module 字段，引用时以这个字段为主，不是 main，默认不支持 commonjs，需要使用插件 resolvenode 实现转换，webpack 适合企业级项目，写好的 loader， plugins，打包优化

tree shaking
rollup 令人津津乐道的就是 treeshaking 功能，把没有使用的代码剔除，减小打包体积

如下一段代码

function test() {
    var name = 'test';
    console.log(123);
}
const name = '测试测试';
function fn() {
    console.log(name);
}

fn();

打包后没有 test 函数的代码

'use strict';

const name = '测试测试';
function fn() {
    console.log(name);
}

fn();

实现原理还是依赖于 ast 解析，也是为什么需要使用 esm 标准，解析的时候，会把代码统一到一个文件的最上层，import 和 export 的字段都会打上标记，在哪里定义，在哪里使用的。自然未使用的也不会引入。

常用命令

npm i -g rollup 全局安装
rollup -i index.js 打包 index.js 文件，在控制台查看内容
rollup -i index.js --file dist.js 打包文件输出到 dist.js 中
rollup -i index.js --file dist.js --format umd 以 umd 模式打包，
还有 iife cjs umd 模式
rollup -i index.js a.js --dir dist 打包到dist 目录下，会自动生成index.js
rollup -i index.js --file dist.js --format umd --name Index (–watch) 可以全局 global 命名