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。
❓
延伸问答
如何在Angular项目中初始化Storybook？
可以通过运行命令 npx storybook@latest init --type angular 来初始化Storybook。
在Angular中使用Vite构建Storybook需要安装哪些包？
需要安装 @analogjs/vite-plugin-angular 和 @storybook/builder-vite 包。
如何配置Storybook以使用Vite构建器？
需要更新 .storybook/main.ts 文件，使用 @storybook/builder-vite，并添加 viteFinal 配置函数。
如何在package.json中直接运行Storybook命令？
可以在 package.json 中添加 scripts，设置 'storybook': 'storybook dev --port 4400' 和 'build-storybook': 'storybook build'。
如果使用Nx，如何更新project.json以运行Storybook？
需要在 project.json 中添加 'storybook' 和 'build-storybook' 的执行器配置，指定命令和工作目录。
如何启动开发服务器以运行Storybook？
可以通过运行命令 npm run storybook 来启动开发服务器。
➡️
