DEV Community
·
在 Angular 中使用 Vite 和 Storybook 🎨
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文讲述如何在Angular项目中用Vite替代Webpack来构建和运行Storybook。步骤包括初始化Storybook，安装AnalogJS Vite插件和Storybook Vite构建器，配置.storybook/main.ts文件，更新package.json以运行Storybook命令，以及在使用Nx的项目中更新project.json。最后，通过运行Storybook命令启动开发服务器或构建Storybook。
🎯
关键要点
- Storybook是一个用于独立构建UI组件和页面的前端工作坊。
- Angular和Storybook默认使用Webpack构建和服务Storybook应用。
- Angular已经切换到使用Vite作为开发服务器。
- 本文指导如何在Angular项目中使用Vite构建和服务Storybook。
- 如果尚未设置Storybook，可以通过命令初始化项目。
- 安装AnalogJS Vite插件和Storybook Vite构建器。
- 更新.storybook/main.ts文件以使用@storybook/builder-vite。
- 在package.json中直接运行Storybook命令。
- 如果使用Nx，更新project.json以运行Storybook命令。
- 运行npm run storybook命令启动开发服务器。
- 运行npm run build-storybook命令构建Storybook。
➡️
