使用Rollup构建组件库，Storybook要求选Vite/Webpack 5该怎么办？

操作步骤 #

不用纠结，直接在Vite或Webpack 5里选一个即可——Storybook的构建工具是独立于你项目的Rollup打包流程的，它只负责渲染组件预览环境，和你用Rollup打包组件库产物的逻辑完全不冲突。

两者适配性对比 #

• 选Vite

  • 适配优势：启动速度快、热更新响应流畅，配置逻辑更简洁，和Rollup的ESM优先理念契合度高，适合组件库的快速调试预览。
  • 潜在注意：如果你的组件依赖少量未转译的CommonJS模块，可能需要在.storybook/main.js里配置vite.optimizeDeps做预构建，但绝大多数现代组件库场景下不需要额外调整。

• 选Webpack 5

  • 适配优势：兼容性拉满，对各类老依赖、复杂打包场景的支持更成熟，如果你组件中用到了Webpack生态的工具或插件，适配成本更低。
  • 潜在注意：启动和热更新速度比Vite慢，配置项相对繁琐，但稳定性有保障。

是否会引发问题 #

两者都不会干扰你的Rollup组件库构建流程。Storybook的构建工具只处理自身的预览服务和组件渲染逻辑，不会修改你项目的Rollup配置或打包产物，完全可以放心使用。

内容的提问来源于stack exchange，提问作者Tsabary