从零开始掌握Rollup配置的核心技巧与常见问题解决方法
夏侯彩云我的写法，亲测靠谱
Rollup 用久了，发现配置文件其实挺有讲究的。我现在的习惯是把核心功能拆分成模块化的小块，既好维护又清晰。下面是我的标准配置，直接贴代码：
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import json from '@rollup/plugin-json';
export default {
input: 'src/index.js',
output: [
{
file: 'dist/bundle.cjs.js',
format: 'cjs',
sourcemap: true,
},
{
file: 'dist/bundle.esm.js',
format: 'esm',
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
json(),
terser({
compress: {
drop_console: true,
},
}),
],
};这套配置看起来简单，但每个部分都有它的用处。比如 sourcemap 我一直开着，调试的时候特别方便。还有 terser 的 drop_console 选项，生产环境去掉日志输出是个好习惯。
这几种错误写法，别再踩坑了
说真的，我在用 Rollup 的时候踩过不少坑，有些问题现在想起来都想给自己一巴掌。
第一个常见的问题是：不加 resolve 和 commonjs 插件，结果打包的时候第三方库根本没法用。像这种写法：
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs',
},
};看着简洁，但实际上你引入的 npm 包可能完全跑不通，报一堆奇怪的错误。原因很简单：默认情况下 Rollup 只支持 ES 模块，很多 CommonJS 的包它压根不认识。
第二个坑是：output 配置里忘记设置多格式输出。如果你只写了 cjs 或者 esm，在某些场景下就会出问题。比如别人用你的库时，他们的项目可能是基于 ESM 的，但你的库只提供了 CJS 格式，那人家就得折腾半天。
第三个错误是：直接把所有插件一股脑塞进去，不管用不用得上。比如有人会写：
import { babel } from '@rollup/plugin-babel';`>
import replace from '@rollup/plugin-replace';export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs',
},
plugins: [
resolve(),
commonjs(),
json(),
terser(),
babel({ babelHelpers: 'bundled' }),
replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
],
};
`>
<p>这种写法看似很全面，但如果项目里根本没用到 Babel 或者环境变量替换，这些插件就是多余的，不仅增加打包时间，还容易引发奇怪的问题。</p><h2>实际项目中的坑</h2>
<p>在真实项目中，有几个点特别需要注意。首先是 <code>external</code> 配置，很多人不知道这个选项的存在，或者干脆忽略它。举个例子，如果你的项目依赖了 React，但没有把它标记为外部依赖，那 Rollup 会尝试把 React 打包进去，导致最终体积暴增。</p></code></pre>javascript
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
},
external: ['react', 'react-dom'],
};
加上
external就能避免这个问题。另外，我还遇到过一个奇葩问题：某些库的默认导出方式跟 Rollup 不兼容，结果打包出来的东西根本跑不了。后来发现是需要手动调整namedExports。还有一个坑是：动态导入（
import()）的支持。如果你的项目里用了懒加载，记得加上@rollup/plugin-dynamic-import-vars插件，不然 Rollup 默认不会处理动态路径。一些小技巧和注意事项
除了上面提到的那些大坑，还有一些小细节我觉得也挺重要。比如，如果你想让打包后的代码更干净，可以试试
rollup-plugin-visualizer插件。它会生成一个可视化的报告，告诉你哪些模块占用了最多的体积。还有个建议是：尽量不要在 Rollup 配置里写太多逻辑代码。有些人喜欢在里面加各种条件判断、环境变量读取，最后搞得配置文件复杂得像个小型程序。我的经验是，简单的才是最好的，复杂的逻辑应该放到单独的脚本里去。
最后再说一下性能优化。如果你的项目很大，建议开启多线程打包工具，比如
rollup-plugin-threaded-terser。虽然配置起来稍微麻烦点，但对于大型项目来说，打包速度能提升不少。以上是我总结的最佳实践
总的来说，Rollup 是个非常灵活的工具，但也正因为灵活，很容易踩坑。我的建议是：先把基础配置搞明白，然后再根据项目需求逐步扩展功能。不要一开始就追求“大而全”，那样只会让自己陷入混乱。
以上是我个人对 Rollup 配置的一些实战经验总结，希望能对你有帮助。如果你有更好的方案，或者发现了新的坑，欢迎在评论区交流！
暂无评论