大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1. 什么是Rollup

Rollup 是 JavaScript 的模块打包器，它可以将小块代码编译成更大更复杂的东西，例如库或应用程序。

Rollup 使用标准化的 ES 模块来编写代码，而不是 CommonJS 和 AMD 等特殊模块解决方案，因为 ES 模块让开发者可以自由、无缝地组合最喜欢的库中最有用的函数。而 Rollup 负责优化 ES 模块以在现代浏览器中更快地进行本机加载。

对于支持 ES 模块的环境，Rollup 可以输出优化的 ES 模块；对于不需要 ES 模块的环境，Rollup 可以将代码编译为其他格式，例如 CommonJS 、AMD 和 IIFE 风格的脚本，从而使得最大程度上面向未来编码。Rollup具有以下明显的特点：

Web 和 Node 支持：Rollup 支持多种输出格式，如ES 模块、CommonJS、UMD、SystemJS 等
Tree-shaking：Rollup 消除给定项目未使用的代码的过程，在ES模块场景下更有用
代码拆分：通过仅使用输出格式的导入机制而不是客户加载程序代码，根据不同的入口点和动态导入拆分代码。
插件生态完善：Rollup 有一个易于学习的插件 API，允许开发者使用很少的代码实现强大的代码注入和转换，已经被 Vite 和 WMR 采用。

2. 什么是unbuild

如 unbuild 官方所言：unbuild是一个统一的 javascript 构建系统。

A unified javascript build system

unbuild 基于Rollup，集成了 Rollup 生态中非常优秀的插件生态，开箱即用的支持 typescript，并允许生成commonjs和es模块格式和类型声明。这意味着开发者不需要手动一个个安装插件，配置，调试后才可以进行开发工作。比如下图展示了unbuild已经集成的诸多插件：

总体来说，unbuild有以下比较明显的特点：

优化的打包器：强大的基于 rollup 的打包器，支持 typescript 并生成 commonjs 和模块格式 + 类型声明。
自动配置 ：从 package.json 自动推断构建配置。
无打包构建：集成mkdist，通过文件到文件的转换生成无打包的 dist目录
被动观察者：使用 jiti 存根 dist目录，可以尝试链接到项目，而无需在开发过程中watch和rebuild
取消类型生成器：无类型集成
安全构建 ：自动检查各种构建问题，例如潜在的缺失和未使用的依赖项以及失败的 CI。 CLI 输出还包括：输出大小和导出以供快速检查。

mkdist：一个轻量的文件转换器，类似webpack 的 loader，用于预处理文件。同时，mkdist 可以保持原有目录文件结构，也支持 vue 的 sfc 组件，静态文件copy。
jiti：Node.js Runtime的 typescript 和 ESM 支持

3.使用unbuild

首先，创建 src/index.ts：

export const log = (...args) => { console.log(...args) }

更新 package.json内容：

{
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  },
  "main": "./dist/index.cjs",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ]
}

使用unbuild进行构建：

npx unbuild

配置是unbuild从映射到 src/ 目录的 package.json 中的字段自动推断的。

4.自定义配置

创建 build.config.ts文件：

export default {
  entries: [
    './src/index'
  ]
}

也可以在 package.json 或 build.config.{js,ts,json} 中使用 unbuild 键来指定配置。比如下面的一个配置:

import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
    // 如果未提供entry，将从 package.json 自动推断
    entries: [
        // default
        './src/index',
        // mkdist builder transpiles file-to-file keeping original sources structure
        {
            builder: 'mkdist',
            input: './src/package/components/',
            outDir: './build/components'
        },
    ],
    // 修改 outDir, 默认是'dist'目录
    outDir: 'build',
    // 自动生成 .d.ts 声明文件
    declaration: true,
})

本文总结

本文主要和大家介绍 unbuild ，即一个基于 RollUp 的统一javascript 构建系统。说实话，这样的简单封装确实找不到从RollUp迁移到 unbuild 的理由。

如果大家对选择构建工具有困难，可以继续在我的主页阅读更多优秀构建工具，有基于GO、Rust的最新一代构建效率提升工具（比如：SWC、Turbopack等），也有基于纯JavaScript的构建工具（如：Vite、Webpack等等）。因为篇幅有限，文章并没有过多展开。如果有兴趣，文末的参考资料提供了大量优秀文档以供学习。

参考资料

https://github.com/unjs/untyped

https://github.com/unjs/jiti

https://github.com/unjs/mkdist

https://github.com/unjs/template

万普插件库

jQuery插件大全与特效教程

你会使用 unbuild 取代 RollUp 么?