在moonrepo/moon项目中集成Storybook的完整指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01032/article/details/148602081

在moonrepo/moon项目中集成Storybook的完整指南

moon A task runner and repo management tool for the web ecosystem, written in Rust. 项目地址: https://gitcode.com/gh_mirrors/moo/moon

前言

Storybook作为目前最流行的UI组件开发工具，能够帮助开发者独立构建、测试和文档化UI组件。本文将详细介绍如何在moonrepo/moon项目中集成Storybook，并实现与Vite、Webpack和Jest等工具的完美协作。

Storybook基础介绍

Storybook是一个开源的前端工作坊，专门用于隔离开发UI组件和页面。它支持：

可视化组件开发
交互式测试
自动生成文档
多框架支持(React、Vue、Angular等)

最新版本Storybook 7默认使用Vite作为构建工具，提供了更快的启动速度和构建性能。

初始化Storybook项目

在moonrepo/moon项目中的某个子项目内初始化Storybook：

cd <项目目录> && npx storybook init

初始化完成后，项目中将生成以下关键文件结构：

.storybook/ - 配置文件目录
stories/ - 示例组件目录
src/ - 实际组件目录

moon.yml配置

在moonrepo/moon项目中，我们需要在moon.yml中配置Storybook相关任务：

fileGroups:
  storybook:
    - 'src/**/*'
    - 'stories/**/*'
    - 'tests/**/*'
    - '.storybook/**/*'

tasks:
  buildStorybook:
    command: 'build-storybook --output-dir @out(0)'
    inputs:
      - '@group(storybook)'
    outputs:
      - 'build'

  storybook:
    local: true
    command: 'start-storybook'
    inputs:
      - '@group(storybook)'

配置说明：

fileGroups定义了Storybook相关的文件组
buildStorybook任务用于构建静态Storybook站点
storybook任务用于启动开发服务器

启动开发服务器命令：

moon run <项目名称>:storybook

Vite集成配置

Storybook 7默认使用Vite，如需扩展Vite配置，可在.storybook/main.ts中修改：

import { mergeConfig } from 'vite';

export default {
  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: '@storybook/builder-vite',
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      resolve: (await import('../vite.config.js')).default.resolve,
      optimizeDeps: {
        include: ['storybook-dark-mode'],
      },
    });
  },
};

关键点：

viteFinal钩子允许合并自定义Vite配置
可以共享项目主Vite配置中的resolve设置
optimizeDeps可预优化特定依赖

Webpack集成方案

虽然Vite是默认选择，但也可以切换回Webpack：

安装Webpack构建器：

npm install --save-dev @storybook/builder-webpack5

修改.storybook/main.ts配置：

export default {
  core: {
    builder: '@storybook/builder-webpack5',
  },
};

测试集成方案

Storybook支持使用Jest进行组件测试，配置步骤如下：

安装测试相关依赖：

npm install --save-dev @storybook/addon-interactions @storybook/addon-coverage @storybook/jest@next @storybook/testing-library@next @storybook/test-runner@next

在moon.yml中添加测试任务：

tasks:
  testStorybook:
    command: 'test-storybook'
    inputs:
      - '@group(storybook)'

启用交互测试功能：

export default {
  addons: [
    '@storybook/addon-interactions',
    '@storybook/addon-coverage',
  ],
  features: {
    interactionsDebugger: true,
  },
};