如何安全删除Storybook中的示例组件及Stories？

架构老林

2026-7-14

正确删除Storybook示例组件的步骤

先终止正在运行的Storybook服务，用Ctrl+C即可，别带着服务删文件。
直接删除那3个示例组件文件（比如Button.jsx、Header.jsx、Page.jsx）和对应的.stories.js/.stories.jsx文件。
清理Storybook缓存，这是解决编译崩溃的核心：
```
npx storybook clean
```
或者用npm命令：
```
npm run storybook -- --clean
```
重新启动Storybook服务：
```
npm run storybook
```
如果还是报错，做两个检查：
1. 打开.storybook/main.js，查看stories配置项，要是里面硬编码了示例文件的路径，把那些条目删掉（默认是通配符../src/**/*.stories.@(js|jsx|ts|tsx)，不会有问题）。
2. 检查项目里其他文件（比如App.jsx）有没有导入已删除的示例组件，有就删掉引用。