React Cosmos 项目中使用 Vite 的完整指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00923/article/details/148440456

React Cosmos 项目中使用 Vite 的完整指南

react-cosmos Sandbox for developing and testing UI components in isolation 项目地址: https://gitcode.com/gh_mirrors/re/react-cosmos

前言

React Cosmos 是一个强大的组件开发环境工具，它允许开发者在隔离环境中构建、测试和迭代 React 组件。本文将详细介绍如何在基于 Vite 的项目中配置和使用 React Cosmos，帮助开发者提升组件开发效率。

环境准备

基础要求

在开始之前，请确保你的开发环境中已经具备以下条件：

Node.js 环境（建议使用 LTS 版本）
一个基于 Vite 的 React 项目
项目已配置基本的 Vite 开发环境

如果你尚未创建 Vite 项目，可以使用 Vite 官方脚手架工具快速初始化一个 React 项目。

安装与配置

安装必要依赖

首先需要安装 React Cosmos 核心包和 Vite 插件：

npm install --save-dev react-cosmos react-cosmos-plugin-vite

创建配置文件

在项目根目录下创建 cosmos.config.json 文件，并添加以下内容启用 Vite 插件：

{
  "plugins": ["react-cosmos-plugin-vite"]
}

配置脚本命令

在项目的 package.json 文件中添加以下脚本命令：

"scripts": {
  "cosmos": "cosmos",
  "cosmos-export": "cosmos-export"
}

创建第一个 Fixture

Fixture 是 React Cosmos 中的核心概念，它代表了一个组件的独立展示场景。让我们创建一个简单的示例：

在 src 目录下创建 Hello.fixture.jsx 文件
添加以下内容：

export default <h1>Hello World!</h1>;

启动开发环境

运行以下命令启动 React Cosmos 开发服务器：

npm run cosmos

启动成功后，在浏览器中访问 http://localhost:5000，你将看到 React Cosmos 的界面，其中包含我们刚刚创建的 Hello fixture。

高级配置

自定义 Vite 配置

React Cosmos 会自动检测项目根目录下的 vite.config.js 或 vite.config.ts 文件。如果你的 Vite 配置文件位于其他位置，可以在 cosmos.config.json 中进行指定：

{
  "vite": {
    "configPath": "./custom/path/vite.config.js"
  }
}

配置选项详解

React Cosmos 提供了多个与 Vite 相关的配置选项：

| 配置项 | 描述 | 默认值 | |--------------------|----------------------------------------------------------------------|------------------------------------------| | vite.configPath | 指定 Vite 配置文件路径，设为 false 可禁用自动检测 | "vite.config.js" 或 "vite.config.ts" | | vite.mainScriptUrl | 自定义主脚本 URL（例如 "/src/my-main.tsx"） | 自动检测主脚本 URL | | vite.port | 指定 Vite 渲染器的端口号 | 5050 |