如何配置Playground CLI实现跨包加载配置并启动Vite应用？

1. CLI核心逻辑：检测并加载项目中的play.config.ts #

在cli.js中实现配置文件定位、加载与函数提取逻辑，Node环境下需处理TS配置文件的转译：

#!/usr/bin/env node
const { resolve } = require('path');
const { findUp } = require('find-up');
const { register } = require('ts-node');

// 注册TS解析能力，支持直接加载TS配置文件
register({ transpileOnly: true });

async function loadPlayConfig() {
  // 从当前工作目录向上查找play.config.ts
  const configPath = await findUp('play.config.ts');
  if (!configPath) {
    throw new Error('未找到play.config.ts配置文件');
  }

  // 加载配置模块并导出指定函数
  const configModule = require(configPath);
  return {
    setupComponents: configModule.setupComponents,
    defineStories: configModule.defineStories
    // 可根据需求扩展其他配置函数
  };
}

async function runPlayCommand() {
  const playConfig = await loadPlayConfig();
  
  // 将配置函数传递给playground核心入口
  const { startViteServer } = require('playground/dist/index');
  await startViteServer(playConfig);
}

runPlayCommand().catch(err => {
  console.error(err);
  process.exit(1);
});

2. 项目侧play.config.ts示例 #

在foo-products项目中定义配置文件，导出需要传递给playground的逻辑函数：

// foo-products/play.config.ts
import { FooButton, FooDialog } from './src/components';
import ButtonStory from './src/stories/Button.story';
import DialogStory from './src/stories/Dialog.story';

export function setupComponents(register) {
  // 注册项目自身组件到playground
  register('FooButton', FooButton);
  register('FooDialog', FooDialog);
}

export function defineStories(addStory) {
  // 定义项目组件的预览故事
  addStory('基础按钮', ButtonStory);
  addStory('模态弹窗', DialogStory);
}

3. Playground核心入口（index.ts）接收并使用配置函数 #

在playground的index.ts中，接收CLI传递的配置函数，整合到Vite应用逻辑：

// playground/src/index.ts
import { createServer, mergeConfig } from 'vite';
import { baseViteConfig } from './vite.config';
import { ComponentRegistry, StoryManager } from './core';

export async function startViteServer(playConfig) {
  // 执行项目组件注册逻辑
  const registry = new ComponentRegistry();
  playConfig.setupComponents(registry.register);

  // 执行故事定义逻辑
  const storyManager = new StoryManager();
  playConfig.defineStories(storyManager.add);

  // 合并基础Vite配置与跨包解析规则
  const finalViteConfig = mergeConfig(baseViteConfig, {
    resolve: {
      alias: {
        'foo-products': resolve(process.cwd(), 'src'),
        'playground': resolve(__dirname, '../src')
      }
    },
    optimizeDeps: {
      include: ['foo-products/src/components']
    }
  });

  // 启动Vite开发服务器
  const server = await createServer(finalViteConfig);
  await server.listen();
  console.log('Playground已启动:', server.config.server.origin);
}

4. 关键细节说明 #

• TS配置兼容：使用ts-node快速处理TS配置文件，也可通过esbuild预转译生成JS配置，提升生产环境性能
• 跨包模块解析：通过Vite的resolve.alias将项目源码目录映射为可直接导入的别名，配合optimizeDeps提前预构建项目组件，避免运行时解析错误
• 函数式扩展：以函数形式传递项目配置逻辑，保持playground工具与业务项目的解耦，支持灵活扩展

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