Modern.js 项目中使用 Storybook 进行组件开发的完整指南

前言

在现代前端开发中，组件化开发已经成为主流模式。如何高效地开发、调试和展示组件是每个开发者都需要面对的问题。Modern.js 作为现代化的前端开发框架，提供了与 Storybook 的无缝集成方案，让组件开发变得更加高效和愉悦。

Storybook 简介

Storybook 是一个专门为组件开发而生的工具，它提供了以下核心能力：

1. 独立开发环境：无需启动整个应用即可开发和测试单个组件
2. 可视化调试：直观展示组件在不同状态下的表现
3. 文档生成：自动生成可交互的组件文档
4. 测试集成：支持与各种测试工具集成
5. 团队协作：方便团队成员共享和讨论组件设计

Modern.js 集成 Storybook

初始化配置

在 Modern.js 项目中启用 Storybook 非常简单：

npx modern new

选择"启用可选功能"后，再选择"启用「Storybook」V7"即可完成初始化。这个命令会自动完成以下工作：

1. 创建 .storybook 配置目录
2. 生成默认配置文件 .storybook/main.ts
3. 添加示例 stories 组件
4. 更新 package.json 添加必要依赖

启动开发环境

配置完成后，只需运行：

npm run storybook

即可启动 Storybook 开发服务器，默认会在浏览器中打开组件预览界面。

高级配置技巧

使用 Rspack 加速构建

Modern.js 支持使用 Rspack 作为构建工具，相比 Webpack 能显著提升构建速度。只需修改配置文件：

// .storybook/main.js
const config = {
  framework: {
    name: '@modern-js/storybook',
    options: {
      bundler: 'rspack'  // 指定使用 Rspack
    }
  },
  typescript: {
    reactDocgen: 'react-docgen'  // Rspack 需要修改此配置
  }
};

自定义构建配置

Modern.js 允许通过 builderConfig 选项自定义构建配置：

const config = {
  framework: {
    name: '@modern-js/storybook',
    options: {
      builderConfig: {
        alias: {
          react: require.resolve('react'),
          'react-dom': require.resolve('react-dom')
        }
      }
    }
  }
};

性能优化建议

1. 文档生成策略：根据项目需求选择合适的文档生成工具

   • react-docgen：性能更好，适合大型项目
   • react-docgen-typescript：类型推断更准确，但性能稍差

2. 构建工具选择：Rspack 构建速度更快，适合开发环境

常见问题解决

构建速度慢

如果发现构建速度不理想，可以尝试以下优化：

1. 检查是否启用了正确的文档生成工具
2. 考虑切换到 Rspack 构建
3. 减少不必要的插件和加载器

配置不生效

Modern.js 项目中的 Babel 和 Webpack 配置需要通过特定方式指定：

• Babel 配置：在 tools.babel 中设置
• Webpack 配置：通过 tools.webpack 或 tools.webpackChain 配置

迁移指南

从 V6 迁移到 V7

1. 配置文件移动：将配置从 config/storybook 移动到 .storybook 目录
2. 框架指定：在配置中添加 framework 部分
3. 依赖升级：确保所有 Storybook 相关依赖升级到 V7 版本
4. 移除旧插件：删除 @modern-js/plugin-storybook 插件

从原生 Storybook 迁移

1. 首先确保 Storybook 版本为 7
2. 修改框架指定为 @modern-js/storybook
3. 将原有配置迁移到 Modern.js 的配置体系中

最佳实践

1. 组件分类：合理组织 stories 目录结构，按功能或业务模块分类
2. 文档规范：为每个组件编写清晰的文档说明
3. 交互示例：提供可交互的示例展示组件各种状态
4. 自动化测试：结合 Storybook 的测试功能实现组件自动化测试

总结

Modern.js 与 Storybook 的深度集成为组件开发提供了完整的解决方案。通过合理的配置和使用，开发者可以：

• 获得更快的构建速度
• 享受开箱即用的开发体验
• 轻松实现组件文档化
• 提高团队协作效率

无论是新项目还是老项目迁移，Modern.js 的 Storybook 集成方案都能为你的组件开发工作流带来显著的效率提升。