基于Lerna、PNPM、Vite的现有项目Storybook配置及服务合并问询

在基于Lerna、PNPM、Vite的单体仓库项目中，完全可以配置让应用服务和Storybook共享同一端口，无需启动两个独立服务器，以下是分场景的具体实现方案：

开发环境：将Storybook集成到应用路由中 #

这种方案无需单独启动Storybook服务，直接通过应用的Vite服务访问Storybook界面：

• 确保子包已安装Storybook Vite相关依赖：

  pnpm add -D @storybook/react-vite @storybook/addon-essentials
  

• 在子包根目录创建.storybook/main.js配置文件，指定Vite构建器：

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

• 在应用中添加Storybook路由入口组件，包裹Storybook的核心逻辑：

  // src/components/StorybookEntry.jsx
  import { useEffect } from 'react';
  import { configure, addDecorator } from '@storybook/react';
  import preview from '../../.storybook/preview';
  
  // 复用Storybook的预览配置
  Object.values(preview.decorators).forEach(decorator => addDecorator(decorator));
  
  export default function StorybookEntry() {
    useEffect(() => {
      // 动态加载所有stories
      const req = require.context('../src', true, /\.stories\.(js|jsx|ts|tsx)$/);
      configure(req, module);
    }, []);
  
    return <div id="storybook-root"></div>;
  }
  

• 在应用路由配置中添加对应路由：

  // src/routes.jsx
  import { Routes, Route } from 'react-router-dom';
  import StorybookEntry from './components/StorybookEntry';
  import App from './App';
  
  export default function AppRoutes() {
    return (
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/storybook/*" element={<StorybookEntry />} />
      </Routes>
    );
  }
  

• 修改Vite配置，确保Storybook依赖被正确预构建：

  // vite.config.js
  export default {
    optimizeDeps: {
      include: ['@storybook/react', '@storybook/addon-essentials']
    },
    server: {
      port: 3000 // 统一使用应用的端口
    }
  };
  

启动应用服务后，访问http://localhost:3000/storybook即可直接进入Storybook界面。

生产环境：托管Storybook静态构建产物 #

生产环境下，可将Storybook打包为静态资源，由应用服务统一托管：

• 执行Storybook打包命令，生成静态文件：

  pnpm run build-storybook
  

  默认产物目录为storybook-static
• 修改Vite配置，将静态产物目录纳入应用的资源托管范围：

  // vite.config.js
  export default {
    server: {
      fs: {
        allow: ['./storybook-static'] // 开发时允许访问该目录
      }
    },
    preview: {
      fs: {
        allow: ['./storybook-static'] // 预览生产构建时允许访问
      }
    }
  };
  

• 部署时，将storybook-static目录放置在应用服务的静态资源目录下，即可通过/storybook路径访问。

注意事项 #

• 确保Lerna/PNPM工作区配置正确，Storybook依赖安装在对应子包或根目录，避免版本冲突
• Storybook版本需与当前Vite版本兼容，建议使用最新稳定版
• 集成路由时，需处理Storybook的内部嵌套路由，确保跳转正常

内容的提问来源于stack exchange，提问作者sushilprj