当前位置：首页 > news >正文

Rollup入门与进阶：为现代Web应用构建超小的打包文件

news 来源：原创 2025/7/13 8:49:26

我们常常面临Webpack复杂配置或是Babel转译后的冗余代码，结果导致最终的包体积居高不下加载速度也变得异常缓慢，而在众多打包工具中Rollup作为一个轻量且高效的选择，正悄然改变着这一切，本文将带你深入了解这个令人惊艳的打包工具

入门Rollup

配置Rollup

Babel转换代码

打包多入口代码

加载三方依赖模块

使用TS模块

压缩JS代码

模板生成html页面

启动开发服务器

处理vue组件

压缩CSS代码

入门Rollup

初识Rollup：是一个现代js的打包工具，主要用于将多个js文件打包成一个或多个最终的输出文件，它特别适用于构建库和模块化的应用程序，与Webpack等其他打包工具相比，Rollup 的一个显著优势是它能生成非常精简的代码，因为它能够进行更好的tree-shaking(去除未使用的代码)和模块优化，其使用特点如下所示：

1）打包后的代码体积小，性能优异

2）支持 ES 模块（ESM）格式

3）插件丰富，能够进行高度自定义

4）支持 tree shaking（去除无用代码）

所以说如果想构建库和小型应用，尤其是需要发布成npm包时，选择Rollup是一个不错的选择，如果想了解更为详细的内容，参考：官网：

项目初始化：接下来我们开始对项目进行一个初始化，首先终端执行如下命令直接全局安装rollup，如下所示：

npm install --global rollup

接下来我们创建一个项目文件夹，然后终端自行pnpm init初始化一个package.json文件，然后执行如下命令来安装一下rollup，安装完成之后，我们在项目根目录创建一个src文件夹，里面新建一个index.js文件，来展示一下要打包的代码：

pnpm i rollup -D

function random() {return Math.random().toString(16).slice(2);
}
console.log(random(), '变化1')
console.log(random(), '变化2')

然后我们根据官网给的入门提示，配置如下的打包命令：

可以看到打包出来的文件，基本上也是能够看懂的

配置Rollup

Rollup作为一个强大的js打包工具，在构建高效优化的模块化代码时展现了其独特的优势，然而Rollup的配置可以有很多细节，本文将带你逐步了解Rollup的配置过程，探讨如何通过Rollup配置优化打包提升代码的加载速度和运行效率，如下所示：

Babel转换代码

现代JavaScript特性(如箭头函数、模板字符串、类、模块化等)并不是所有浏览器都支持，特别是一些旧版浏览器(例如 Internet Explorer)，Babel可以将这些新特性转换为旧版浏览器可以理解的代码以确保不同环境下的兼容性，接下来我们需要终端安装如下依赖：

// @babel/core babel的核心包
// @babel/preset-env 预设
// @rollup/plugin-babel babel插件
// @babel/runtime 减小最终构建文件的体积
// @babel/plugin-transform-runtime 减少转换过程中出现的重复代码
pnpm i @rollup/plugin-babel @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime -D

安装完插件之后，我们在根目录创建一个 .babelrc 的babel配置文件，然后进行如下配置：

{"presets": [["@babel/preset-env",{"modules": false}]],"plugins": ["@babel/plugin-transform-runtime"]
}

配置完成之后我们来到config文件中进行如下babel插件的设置：

然后我们在入口文件写一个ES6模块的箭头函数，打包之后就会变成普通的function函数，兼容了低版本浏览器不支持ES6高级语法的情况：

打包多入口代码

上面我们配置的都是打包单入口的代码，如果想配置打包多入口的代码需要通过如下操作进行：

打包代码之前，我们需要先将打包文件中原本的文件先删除掉，这里需要借助如下插件：

pnpm i rollup-plugin-clear -D

然后我们引入插件之后进行如下插件的注册即可：

如下我们在dist文件下随便建一些文件，当我们执行打包之后，这些无关的文件都会被清除掉：

加载三方依赖模块

如果想rollup支持三方依赖插件的打包，这里我们需要安装如下插件然后进行一些配置：

pnpm i @rollup/plugin-node-resolve @rollup/plugin-commonjs -D

安装完成之后，我们仍然需要在配置文件当中进行如下插件的设置：

设置完成之后，我们可以安装一个三方依赖尝试一下，如下：

pnpm i lodash -s

如下当我们执行打包的时候就会把三方插件的依赖全部打包到文件当中：

当然可能还会有一些情况，比如说我们引入的第三方依赖当中含有的node语法，浏览器是无法识别的，这里我们需要替换一下打包结果中的关键字，终端执行如下命令：

pnpm i @rollup/plugin-replace -D

安装完成之后，在rollup配置文件当中进行如下配置即可：

replace({ // 替换打包结果中在浏览器中不兼容的代码，例如process.env.NODE_ENV'process.env.NODE_ENV': JSON.stringify('production'), // 替换代码中的环境变量preventAssignment: true // 防止替换赋值表达式，例如process.env.NODE_ENV = 'production'
}),

使用TS模块

如果想编译TS文件为js代码的话，需要终端安装如下插件：

pnpm i @rollup/plugin-typescript tslib -D

然后在配置文件中注册插件即可：

如下当执行打包的时候，TS文件编译成JS文件：

然后如果想对我们的ts编译进行一些操作的话，直接执行tsc --init生产ts配置文件，然后在里面调整即可，如下所示：

然后我们可以根据自身情况进行一个配置，例如如下所示：

{"compilerOptions": {"target": "ES6", // 编译目标为ES6                            "module": "ESNext", // 模块系统为ESNext                        "strict": false, // 启用所有严格类型检查选项                    "skipLibCheck": true, // 跳过所有声明文件的类型检查                    "esModuleInterop": true, // 允许从默认导出导入模块                    "forceConsistentCasingInFileNames": false, // 禁止对同一个文件的不一致的引用                    }
}

压缩JS代码

如果我们想对JS代码进行一个压缩，这里我们可以终端执行如下命令安装插件：

pnpm i @rollup/plugin-terser -D

安装完插件之后，还是对插件进行一个导入并使用：

然后我们执行打包，可以看到我们的代码已经真正被压缩了：

模板生成html页面

如果我们想根据模板html生成html单页面，这里我们可以终端执行如下命令安装插件：

pnpm i rollup-plugin-generate-html-template -D

安装完成之后，这里我们仍然需要在rollup配置文件当中，设置该模板插件，如下所示：

添加完成之后我们在src目录下新建一个index.html文件，这里可以演示作为vue的根节点：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- vue的挂载点 --><div id="app"></div>
</body>
</html>

当我们执行打包命令之后，html页面就会自动被打包到dist文件下，并且会自动注入js代码，注入js代码的类型也是我们设置的module，当我们执行html之后，浏览器也会执行js中的代码逻辑：

启动开发服务器

上面我们通过模板生成index.htm文件之后，如果想方便的运行项目的话，这里我们可以安装如下插件来帮助我们快捷的实现服务器的运行：

pnpm i rollup-plugin-serve -D

安装完插件之后，我们就可以在rollup配置文件当中进行如下配置：

然后我们可以在package.json文件当中针对不同的环境执行不同的文件，这里本地环境就执行dev命令即可，生产环境就执行build命令即可，然后针对不同的环境也可执行不同的配置文件：

比如说生产的配置文件中，不需要执行启动开发服务器的插件，本地环境不需要执行压缩代码的插件，然后不同的环境替换关键字的命令也不同，如下所示：

然后我们运行pnpm run dev命令，打开本地环境，如下可以看到会自动打开浏览器，查看f12可以看到我们打包的命令被执行了：

处理vue组件

如果我们想基于vue来开发一些功能的话，这里需要终端执行如下命令安装插件：

pnpm i vue -s
pnpm i rollup-plugin-vue -D

安装完插件之后，我们需要引入该插件，然后把vue编译放在插件列表的第一个：

然后我们开始编写vue模板并在入口文件中进行引入即可：

这里顺便为vue文件添加类型声明，如下所示：

终端执行打包命令之后，可以看到我们的浏览器已经打印了我们定义的内容：

压缩CSS代码

如果相对我们CSS代码进行一个压缩，这里我们可以终端执行如下命令安装插件，后面两个插件分别是对压缩和浏览器版本进行的控制：

pnpm i rollup-plugin-postcss cssnano autoprefixer -D

完整完插件之后，我们来到配置文件当中，进行如下配置：

import postcss from 'rollup-plugin-postcss';
import cssnano from 'cssnano';
import autoprefixer from 'autoprefixer'// 处理 CSS
postcss({extract: 'bundle.css', // 提取CSS到单独的文件modules: false, // 禁用 CSS Modulesminimize: true, // 开启压缩plugins: [autoprefixer, cssnano], // 使用 cssnano 插件进行压缩
}),

这里我们还需要来到package.json文件当中，设置browserslist指定项目所支持的浏览器范围的配置，如下所示：

"browserslist": ["defaults","not ie < 8","last 2 versions","> 1%","iOS 7","last 3 iOS versions"
]

执行打包命令之后，可以看到我们的css文件已经被压缩，并且浏览器的样式也成功生成，并且也兼容了其他浏览器的版本：

未完待续...

入门Rollup

配置Rollup

Babel转换代码

打包多入口代码

加载三方依赖模块

使用TS模块

压缩JS代码

模板生成html页面

启动开发服务器

处理vue组件

压缩CSS代码

相关文章：