配置文件与基础配置

🎯 引言

学完这篇文章，你将学会用 rollup.config.mjs 配置文件管理打包选项，掌握最常用的基础配置，并能通过 watch 模式让代码改动后自动重新打包。

🧱 为什么需要配置文件

上一篇我们用命令行完成了打包：

npx rollup src/index.js --file dist/bundle.js

这种方式只适合体验。一旦选项变多（输出格式、插件、压缩……），命令会又长又难维护，团队同事也没法直接看到配置。

所以实际项目中，我们都会把配置写进配置文件里。Rollup 默认读取项目根目录下的 rollup.config.mjs。

🧱 创建 rollup.config.mjs

在项目根目录新建 rollup.config.mjs，写入最基础的配置：

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'es'
    }
};

配置只有两个核心字段：

然后执行打包：

npx rollup -c

-c 是 --config 的缩写，表示“使用配置文件”。效果和上一篇的命令行完全一致。

🛠 常用的 output 基础配置

output 里还有几个高频选项，了解一下就能应对大部分场景：

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'es',
        sourcemap: true,
        banner: '/* my-utils v1.0.0 */'
    }
};

• sourcemap：生成 .map 文件，调试时能把产物代码映射回源码。
• banner：在产物顶部插入一段注释，常用来写版本号和版权信息。
• format：输出格式，这里是 es（ES 模块）。格式种类较多，下一篇会专门讲解。

打包后打开 dist/bundle.js，顶部就能看到 banner 注释，旁边还多了一个 bundle.js.map 文件。

👀 watch 监听模式

开发时每次改完代码都手动执行一次打包，太麻烦了。加上 -w 参数即可开启监听模式：

npx rollup -c -w

启动后 Rollup 会持续盯着源码文件，每次保存都会自动重新打包，命令行会实时打印打包结果。按 Ctrl + C 退出监听。

📦 配置 npm scripts

每次都敲 npx rollup -c 也有点啰嗦，把它写进 package.json 的 scripts 里：

{
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w"
    }
}

之后只需要：

# 开发时：监听打包
npm run dev

# 发布前：构建产物
npm run build

命令更短，团队里所有人也用同一套命令，不容易出错。

🧾 小节总结

• 配置文件默认是 rollup.config.mjs，通过 export default 导出配置对象。
• input 指定入口，output 指定输出位置、格式、sourcemap、banner 等。
• rollup -c 使用配置文件打包，-w 开启监听模式。
• 推荐把打包命令写进 package.json 的 scripts，统一团队入口。

❓ 知识问答

Q1：配置文件可以用 rollup.config.js 吗？

A：可以，但需要让 Node.js 按 ES 模块解析它，比如在 package.json 中设置 "type": "module"。用 .mjs 后缀最省事。

Q2：output.file 和 output.dir 有什么区别？

A：file 表示把所有代码合并输出到一个文件；dir 表示输出一个目录，Rollup 会在里面拆分成多个文件（代码分割时用到）。写小型工具库通常用 file 就够了。

Q3：watch 模式下新增的文件会被监听吗？

A：会。Rollup 监听的是整个依赖图，新文件只要被入口间接引用，保存时就会触发重新打包。

Q4：配置文件里能写注释吗？

A：可以。rollup.config.mjs 就是普通的 JavaScript 文件，可以使用 // 和 /* */ 注释。

🧪 小练习

在上一篇的 rollup-demo 项目中完成以下任务：

1. 新建 rollup.config.mjs，配置入口为 src/index.js，输出到 dist/bundle.js，开启 sourcemap。
2. 在 package.json 中添加 build 和 dev 两个脚本。
3. 运行监听模式，修改 src/index.js 的内容并保存，观察自动重新打包。

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'es'
        // 请在这里补充 sourcemap 配置
    }
};

🎉 恭喜你已经掌握了 Rollup 的基础配置！下一篇我们会详细讲解输出格式，让你的库能在各种环境下运行。