在 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。
❓
Q&A
如何在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 来启动开发服务器。
🏷️
