在Create React App项目中集成React Cosmos组件开发环境

在Create React App项目中集成React Cosmos组件开发环境

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

前言

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

环境准备

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

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

基础配置

在项目根目录下创建cosmos.config.json配置文件：

{
  "plugins": ["react-cosmos-plugin-webpack"],
  "staticPath": "public",
  "watchDirs": ["src"],
  "webpack": {
    "configPath": "react-scripts/config/webpack.config"
  }
}

这个配置告诉React Cosmos：

1. 使用Webpack插件
2. 静态资源目录为public
3. 监听src目录下的文件变化
4. 使用CRA内置的Webpack配置

解决React Refresh问题

由于CRA内置的Webpack配置与React Cosmos可能存在兼容性问题，特别是React Refresh功能，建议在package.json中添加以下脚本：

"scripts": {
  "cosmos": "FAST_REFRESH=false cosmos",
  "cosmos-export": "cosmos-export"
}

通过设置FAST_REFRESH=false可以避免潜在的刷新问题。

创建第一个组件夹具(Fixture)

在src目录下创建Hello.fixture.jsx文件：

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

注意：使用CRA时，所有夹具文件必须放在src目录下。

启动开发环境

运行以下命令启动React Cosmos：

npm run cosmos

启动后，在浏览器中访问localhost:5000，你将看到React Cosmos的UI界面和刚刚创建的Hello组件。

高级配置方案

使用react-app-rewired

如果你使用react-app-rewired来修改CRA配置，可以在项目根目录创建webpack.config.js：

const { paths } = require('react-app-rewired');
const overrides = require('react-app-rewired/config-overrides');
const config = require(paths.scriptVersion + '/config/webpack.config.dev');

module.exports = overrides.webpack(config, process.env.NODE_ENV);

React Cosmos会自动识别这个配置文件。

使用CRACO与Tailwind CSS

对于使用CRACO和Tailwind CSS的项目，配置略有不同：

1. 创建webpack.config.js：

const { createWebpackDevConfig } = require('@craco/craco');
const cracoConfig = require('./craco.config.js');
const webpackConfig = createWebpackDevConfig(cracoConfig);

module.exports = webpackConfig;

2. 配置全局CSS导入：

{
  "globalImports": ["src/index.css"],
  "staticPath": "public"
}

最佳实践建议

1. 组件隔离开发：利用React Cosmos的隔离环境特性，可以独立开发每个组件而不受应用其他部分影响
2. 状态模拟：通过夹具可以轻松模拟组件的各种状态和属性组合
3. 文档生成：使用cosmos-export命令可以生成静态组件文档
4. 团队协作：共享的组件库可以帮助团队成员理解和使用现有组件

通过以上配置，你已经在CRA项目中成功集成了React Cosmos，可以开始享受组件驱动开发的便利了。这种开发模式特别适合大型项目或组件库的开发，能够显著提高组件的可重用性和开发效率。

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