Rollup 与 Parcel

Rollup 擅长把 ES Module 打成适合发布的库（单文件 ESM/CJS、类型声明）；Parcel 走 零配置应用打包 路线。二者与 ft-vite 的「开发体验优先」形成互补。

学习目标

• 区分「应用打包」与「库打包」的目标差异
• 知道 Rollup 为何 tree-shaking 强
• 了解 Parcel 零配置适用场景与现状

库 vs 应用

目标	关注点	常见工具
npm 库	导出 API、types、多格式	Rollup、tsup、unbuild
Web 应用	路由、HMR、代码分割	Vite、Next.js、Parcel

javascript-core 写的工具函数若要发布到 npm，需要 明确的 entry、external peerDependencies——Rollup 为此设计。

Rollup 要点

// rollup.config.js 概念
export default {
  input: "src/index.ts",
  output: [
    { file: "dist/index.esm.js", format: "esm" },
    { file: "dist/index.cjs.js", format: "cjs" },
  ],
  external: ["react", "react-dom"], // 不打包进库
};

• external：React 组件库应把 react 列为 peer，避免双实例
• @rollup/plugin-node-resolve、typescript 插件补全解析
• Vite 生产构建内核即 Rollup——学会 Rollup 概念有助于读 Vite build.rollupOptions

Parcel 要点

Parcel 2 强调 开箱即用：HTML 入口、JS/TS/CSS/图片自动处理，适合 原型或教学 demo。

现状：生态热度低于 Vite/Next；新项目更常选 Vite。了解即可——维护老 Parcel 项目时查官方迁移指南。

与 react / typescript 生态

• UI 组件库（shadcn 底层、各 headless 库）发布流程常见 Rollup + d.ts
• typescript-essentials：declaration: true 生成 .d.ts 与 Rollup 输出一并发布
• react-essentials 应用开发 很少手写 Rollup，除非抽公共包

tsup 简写

Many 库用 tsup（esbuild 封装）一行命令：

tsup src/index.ts --format esm,cjs --dts

选型：内部工具库 tsup 够快；需精细 chunk 控制再用 Rollup。

练习

• 读一个 npm 包的 package.json 里 module/main/types 字段
• 说明为何 React 库要把 react 标为 peerDependencies
• 对比 Vite 与 Rollup 在你心中的使用场景各一句

小结

Rollup 精打包库；Parcel 零配置打应用；现代应用开发多交给 Vite/Next。 下一课进入质量层：ESLint 如何约束代码风格与错误模式。