当前位置：首页 > React

如何快速构建react组件库

2026-01-25 01:59:27React

快速构建 React 组件库的方法

使用脚手架工具初始化项目

推荐使用 create-react-app 或 Vite 快速初始化项目。以 Vite 为例：

npm create vite@latest my-component-library --template react
cd my-component-library

配置组件库结构

在 src 目录下创建 components 文件夹，每个组件独立成文件夹，包含以下文件：

ComponentName.tsx（组件逻辑）
ComponentName.stories.tsx（Storybook 文档）
index.ts（导出组件）

示例目录结构：

src/
  components/
    Button/
      Button.tsx
      Button.stories.tsx
      index.ts

设置样式方案

可选择 CSS Modules、Styled-components 或 TailwindCSS。以 CSS Modules 为例：

如何快速构建react组件库

// Button.tsx
import styles from './Button.module.css';

const Button = ({ children }) => {
  return <button className={styles.button}>{children}</button>;
};

配置 Storybook 文档

安装 Storybook：

npx storybook@latest init

修改 .storybook/main.js 扫描组件：

如何快速构建react组件库

module.exports = {
  stories: ['../src/components//*.stories.tsx'],
};

配置打包工具

使用 Rollup 或 Vite 打包组件库。以 Rollup 为例：

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript --save-dev

创建 rollup.config.js：

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [resolve(), commonjs(), typescript()],
};

导出组件库

在 src/index.ts 中集中导出所有组件：

export { default as Button } from './components/Button';

发布到 npm

在 package.json 中设置：

{
"name": "my-component-library",
"version": "1.0.0",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"files": ["dist"]
}