【亲测免费】 Storybook 开源项目安装与使用指南

Storybook 是一个广泛使用的前端开发工具，它允许开发者在隔离环境中构建、记录和测试 UI 组件。本指南将带你了解其基本结构、启动流程以及核心配置文件，帮助你快速上手Storybook。

1. 项目目录结构及介绍

Storybook作为一个Monorepo（多库仓库），其内部结构复杂且灵活。以下是核心组件常见的目录结构概述：

根目录主要文件及说明:

• .gitignore: 忽略不需要提交到版本控制的文件或文件夹。
• LICENSE: 许可证文件，表明项目遵循MIT许可证。
• README.md: 项目简介和快速入门指南。
• packages: 存放各个子包，如@storybook/*的npm包。
• scripts: 含有自定义脚本，用于项目开发中的各种自动化任务。
• stories 或 examples: 示例故事文件夹，展示了如何编写组件的故事。
• test: 单元测试相关文件。
• docs: 文档和指南资料。
• yarn.lock, package.json: 依赖管理和锁定文件。

主要运行和服务脚本通常位于根目录下的特定配置文件中，例如通过yarn start或指定命令来执行。

2. 项目的启动文件介绍

虽然直接在Storybook项目仓库中没有单一的“启动文件”供最终用户直接修改，但使用Storybook时，通常会依赖于命令行工具启动。你将在项目中创建自己的.storybook目录，其中有两个关键作用：

• .storybook/main.js或.storybook/config.js: 这是Storybook的主要配置文件，用于设定入口、预处理器、加载器、addons等。
• 命令行接口(CLI): 用户通过如npx sb init初始化项目，并用yarn start或npm run storybook命令来启动本地服务器。

3. 项目的配置文件介绍

.storybook/main.js

这是一个典型的配置文件示例，用于定制Storybook的设置：

module.exports = {
  stories: ['../src/stories/**/*.stories.mdx', '../src/stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-docs',
  ],
};

• stories: 定义了Storybook应该查找故事文件的路径模式。
• addons: 列出了项目使用的addons，它们扩展了Storybook的功能。

.storybook/preview.js

此文件用于全局配置故事的上下文，比如全局CSS导入、装饰器等：

import './global.css';

// 自定义预渲染逻辑或全局装饰器
export const decorators = [(storyFn) => <div style={{ padding: '1rem' }}>{storyFn()}</div>];

通过上述概览，你可以开始理解和搭建你的UI组件库，利用Storybook的强大功能进行高效开发、测试与文档化。记得查阅官方文档以获取最新和详细的配置选项。