Percy Storybook 项目教程

1. 项目目录结构及介绍

percy-storybook/
├── .github/
│   └── workflows/
│       └── ci.yml
├── .storybook/
│   ├── main.js
│   ├── preview.js
│   └── percy.js
├── src/
│   ├── components/
│   │   └── Button.js
│   ├── stories/
│   │   └── Button.stories.js
│   └── index.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• .github/workflows/: 包含GitHub Actions的工作流配置文件，用于持续集成和部署。
• .storybook/: Storybook的配置目录，包含Storybook的主要配置文件和Percy的配置文件。
  • main.js: Storybook的主要配置文件，定义了Storybook的行为和加载的组件。
  • preview.js: 用于配置Storybook的预览窗口。
  • percy.js: Percy的配置文件，用于定义Percy的视觉测试配置。
• src/: 项目的源代码目录。
  • components/: 存放React组件的目录。
  • stories/: 存放Storybook故事文件的目录。
  • index.js: 项目的入口文件。
• .gitignore: Git忽略文件，定义了哪些文件和目录不应该被Git跟踪。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的说明文档。
• yarn.lock: Yarn的锁定文件，确保依赖版本的一致性。

2. 项目启动文件介绍

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

启动文件介绍

• src/index.js: 这是项目的入口文件，负责渲染React应用到DOM中。它引入了React和ReactDOM库，并将App组件渲染到root元素中。

3. 项目配置文件介绍

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
  ],
};

.storybook/preview.js

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

.storybook/percy.js

module.exports = {
  percy: {
    storybookShots: {
      storybookUrl: 'http://localhost:6006',
    },
  },
};

配置文件介绍

• .storybook/main.js: 这是Storybook的主要配置文件，定义了Storybook的行为和加载的故事文件。它指定了Storybook加载的故事文件路径，并配置了Storybook的插件。
• .storybook/preview.js: 这是Storybook的预览配置文件，定义了Storybook预览窗口的行为。它配置了动作和控件的匹配规则。
• .storybook/percy.js: 这是Percy的配置文件，定义了Percy的视觉测试配置。它指定了Storybook的URL，以便Percy可以捕获Storybook的截图。

---

以上是基于percy-storybook项目的教程内容，涵盖了项目的目录结构、启动文件和配置文件的详细介绍。希望这些内容能帮助你更好地理解和使用该项目。