Rollup & 的作用、使用教程、支持 Vue、以及与 Webpack / Babel 的区别

原创

已于 2023-07-16 22:10:30 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #rollup #Web 模块化

于 2023-07-16 22:04:56 首次发布

一、前置知识

没接触过前端模块化概念的同学可先参考：JS & Node 模块化解释：AMD、UMD、CommonJS、 ESM

二、什么是 Rollup ？

Rollup 工具可以将代码转成不同模块，实现一套代码多端（浏览器/Node）引入。比如通过一句命令将代码打包为：

浏览器（代码通过 Script 标签引入）

rollup main.js --file bundle.js --format iife

AMD（兼容 requirejs.js 框架）

rollup main.js --file bundle.js --format amd

CommonJS（Node.js 代码通过 CJS 方式引入）

rollup main.js --file bundle.js --format cjs

UMD （浏览器、AMD、CJS 均支持，是目前最常见的模块选择方式）

rollup main.js --file bundle.js --format umd --name "myBundle"

后面会提到每个命令的作用，这里了解即可。

三、Rollup 的应用场景和好处

如果你的项目是以插件或库给用户引入使用，Rollup 是最佳选择，它可以将代码转成不同的模块，然后用户根据自身项目模块语法来引入你的代码。
Rollup 支持 Tree-shaking ，只打包引用代码，无引用的一律甩掉。
你的项目可以肆无忌惮地使用 ESM 写法，Rollup 将会自动编译，再结合 Babel 美滋滋。

四、Rollup 与 Webpack/Vite 的区别

Rollup 将 JS 代码转成不同的引入模块形式，如果要处理其它语言需要借助插件。
Webpack 将 JS 代码进行打包压缩，同时拥有着 CSS/JS/HTML/Font 等其它语言插件的生态丰富圈。
组件库或插件适合用 Rollup 打包、大型项目适合用 Webpack 或 Vite 。

五、Rollup 与 Babel 的区别

Rollup 可将 JS 代码变成多种模块来引入运行。
Babel 可将高级 JS 语法代码转成低级版本兼容运行。

六、Rollup 使用教程

6.1 准备工作

新建项目： rollup-example
项目结构：

src/main.js 代码：

const user = () => {
     
     
  return {
     
     
    name: 'Jack'
  }
}
export {
     
      user };

全局安装 Rollup：
```
npm install rollup -g
```

6.2 使用命令行

6.2.1 使用 CLI 打包

rollup ./src/main.js --file lib.js --format cjs

解释：

./src/main.js 是目标即入口文件。
--file lib.js 是输出的产物文件名。
--format cjs 是需要转换的模块格式，这里我们采用 CJS，表示只用于 Node.js

打包后的产物：
在这里插入图片描述

6.2.2 参数命令说明

-o === --file === output 输出产物的文件名。
-d === --dir === 输出产物的目录名，一般在开启 code spliting 代码分割技术后才用到。
-f === --format === 打包模块格式。
-w === --watch === 启动监听模式，当项目代码有变动时，自动执行打包命令。
-c === --config === rollup.config.js 指向配置文件。

其它参数命令可参考官方文档。

6.3 使用配置文件

当频繁使用打包命令且参数量越来越多时，Rollup 支持配置文件的方式，例如：

// rollup.config.js
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel'