Storybook 组织项目的目录结构

5 min read

在使用Storybook 组织项目时，可以按照以下目录结构组织文件：

- src
   |__ components
   |     |__ Button
   |     |    |__ Button.js
   |     |    |__ Button.stories.js
   |     |    |__ Button.css
   |     | 
   |     |__ Input
   |           |__ Input.js
   |           |__ Input.stories.js
   |           |__ Input.css
   |
   |__ stories
   |     |__ index.js
   |
   |__ App.js
   |__ index.js

在这个结构中：

  • src 目录是项目的主要代码目录。
  • components 目录用于存放所有的组件，每个组件都有自己的文件夹。
  • 在每个组件的文件夹中，通常包含一个组件的 JavaScript 文件（例如 Button.js）用于定义组件的代码，一个 Storybook 的 stories 文件（例如 Button.stories.js）用于编写组件的故事以及可视化测试，还有一个样式文件（例如 Button.css）用于定义组件的样式。
  • stories 目录用于存放所有组件的故事文件，其中 index.js 用于导出所有组件的故事。
  • App.js 是项目的主要入口文件，而 index.js 是项目的核心启动文件。

除了上述目录外，还可以根据实际项目需求添加其他文件夹，例如用于存放工具函数或钩子的目录，用于存放静态资源的目录等。这个目录结构提供了一种清晰的组织方式，使得项目中的组件和故事易于找到和管理。