使用Rollup构建React项目 | Gzc BLOG

type

status

date

slug

summary

category

icon

password

💡

最近参加了北京大学计算与数字经济研究院下的工业智能的面试，一面之后二面需要在复试之前做2个小Quize，因为是全栈岗，所以考核中也包括了一个前端组件的实现，实现要求很自由并没有任何限制。不想用太重的框架或成熟生态技术脚手架来做这个实现，正好对比了目前生态各个毕竟流行的打包方式，Webpack、Vite、esbuild等等，看到目前比较火的Vite其实内部打包也是利用的Rollup来做的处理只是非显性的配置，联想起多年前在Ant做过的统一认证认证的Sdk，当时也是选用的Roullup早期版本方案来做的打包输出，那时还没有很完善的生态周边插件，现在朝花夕拾了

准备

使用的包管理器是 yarn@4.1.1

安装依赖

首先按照rollup对React项目中所需要用的包开发依赖进行安装

关键开发依赖库的用途

rollup-plugin-commonjs 将CommonJS模块转换为ESM

rollup-plugion-node-resolve 帮助Rollup直接查找并使用第三方库 node_modules模块

rollup-plugin-clear 清空输出目录

rollup-plugin-terser 压缩

@rollup/plugin-typescript rollup编译解析typescript

rollup-plugin-serve 开发服务启动（热更新）

配置

初始化配置

yarn dlx tsc —init or tsc --init

yarn dlx @yarnpkg/sdks vscode

Then, In VSCode

CMD + SHIFT + P → Select Typescript Version

Use .yarn/sdk/typescript/lib

Rollup配置

Rollup相关回顾

ES6 Module

导入第三方模块

在rollup中需要引入第三方模块时，需要引入插件 rollup-plugin-node-resolve 来实现，因为默认rollup本身只能通过本地文件路径来引入模块，并不能通过包的名称来引入node_modules中安装的第三方类库。

Tree Shaking 树状摇曳

Rollup 提供Tree-Shaking功能，这个形象的名词描述了功能就像是摇晃树，那些不再被需要的树枝叶子会掉落下来，这里指的是那些不需要被打包进去的代码。

这个功能在Webpack中可以通过 babel-plugin-import 可实现按需加载减少打包体积

CommonJS 和 ESM

为了确保你的 ES 模块可以立即被处理 CommonJS 的工具，例如 Node.js 和 webpack 使用，你可以使用 Rollup 编译成 UMD 或 CommonJS 格式，然后在 package.json 文件中使用 main 属性指向编译后的版本。如果你的 package.json 文件还有一个 module 字段，那么像 Rollup 和 webpack 2+ 这样的可感知 ES 模块的工具将直接导入 ES 模块版本。

默认rollup 是不支持CommonJS打包的，默认输出的为ESM，更偏向于前端类库支持。如果需要想在Rollup中实现CJS 输出的话，需要引用 rollup-plugins-commonjs 来实现。

🤗 总结归纳

当需要使用一种简单有效的对类库的打包当时Rollup 还是非常适用的，但是如果开发一个复杂度更高项目而不是单一功能或表现的库，还是需要webpack或Vite等更加丰富完善的打包工具。

📎 参考文章

rollup 官网