monorepo+vue3+ts组件库(三)

组件库打包

• gulp控制打包流程，打包采用rollup。
• 根目录 package.json 配置，"build":"gulp -f build/gulpfile.ts"。
• 串行、并行打包，根目录下执行pnpm add gulp @types/gulp sucrase -w -D
• Gulp 样式转译配置；

# 安装 Gulp 插件
pnpm install gulp-autoprefixer gulp-clean-css gulp-sass -w -D

# 安装 TypeScript 类型定义
pnpm install @types/gulp-autoprefixer @types/gulp-clean-css @types/gulp-sass @types/sass gulp-typescript -w -D

summary

工具	定位	特点	适用场景
Rollup	模块打包工具	精简、Tree-shaking 优秀	构建 JS 库或工具
Gulp	任务自动化工具	灵活、插件丰富，适合文件操作	自动化任务和定制流程
Webpack	全能模块打包工具	功能全面，支持各种模块和插件	复杂 Web 应用
Vite	快速开发工具 + 打包工具	快速启动、现代化、支持 HMR 和 ESM	开发现代前端框架应用

• 工具选择建议

根据项目的特点和需求选择适合的工具：

需求	推荐工具
构建 JS 库	Rollup、Esbuild
小型快速开发	Parcel、Vite
复杂 Web 应用	Webpack、Turbopack
快速开发环境	Vite、Snowpack
自动化任务管理	Gulp、Grunt
构建极大速度优化	Esbuild、SWC、Turbopack
单体项目管理（Monorepo）	Nx

Rollup

• 库打包：以 ESM (ES Modules) 为核心设计，能生成体积小且高效的模块包，适合构建js库(组件库、工具库)
• Tree-shaking：可移除未使用的代码，精简产物
• 配置简单，比webpack轻
• 支持 ESM,CommonJs，UMD,IIFE 输出格式

1. 不适用于 自动化任务、开发服务器
2. 动态导入+非模块化资源(图片、样式等)需要插件支持

Gulp

• 流程处理：基于Node.js的流(stream)处理机制，用于文件 读取、操作、输出。
• 代码转译：文件压缩、图片处理、css预处理器编译、代码合并等
• 适用于处理 某些不属于模块打包范围的任务（图片优化、定制脚本任务）。

1. 不专注模块打包，更多用于开发流程辅助

Webpack

• 支持模块打包（JavaScript、css、图片、字体），集成开发服务器、热更新。
• 默认支持 ES Modules、CommonJs、AMD等
• Babel转码、PostCSS处理

1. 处理大型项目，构建速度较慢

Vite

• 基于 ES Modules +浏览器原生支持，开发阶段不需要完全打包，启动速度快。
• 使用 Rollup作为生产环境打包工具
• 自带开发服务器+热模块替换（HMR）

1. 老旧浏览器支持需要额外配置（@vitejs/plugin-legacy）

Parcel

• 开箱即用，无需复杂配置
• 支持多核编译、热模块替换(HMR)、Tree-shaking、代码分割

1. 对复杂项目自定义需求支持有限、不如 Webpack Rollup 灵活。

Snowpack（小众）

Esbuild

• 基于Go编写，可能是 Webpack/Vite 替代品

1. 没有 Webpack Rollup 生态全面，定制化需求要结合其他工具。

SWC (Speedy Web Compiler) future

• 基于 Rust 编写，比 Babel等传统编译器快数倍。
• 替代 Babel 或结合其他工具（如 Vite 或 Rollup）

Turbopack future

• 下一代打包工具（由 Webpack 作者推出）
• 基于 Rust 编写，号称比 Webpack 快 10 倍以上

Nx （Monorepo）

• 单体式仓库（Monorepo）工具链
• 面向大型单体项目或多包管理（Monorepo）
• 集成现代工具链（如 Webpack、Vite）
• 缓存机制和依赖图优化构建速度