React + Vite 搭建一个简单的组件库

以下是一个简单的React组件库的创建步骤，使用Vite作为构建工具：

1. 初始化项目：

npm init @vitejs/app my-component-library
cd my-component-library

2. 安装依赖：

npm install

3. 创建组件文件夹和组件，例如Button.jsx：

// /src/components/Button/Button.jsx
import React from 'react';
 
const Button = ({ label }) => {
  return <button>{label}</button>;
};
 
export default Button;

4. 创建一个索引文件来导出组件，例如index.js：

// /src/components/Button/index.js
import Button from './Button';
 
export { Button };

5. 在库的入口文件（如src/index.js）导入并导出所有组件：

// /src/index.js
export { default as Button } from './components/Button';
// 可以继续导出更多组件

6. 构建库：

npm run build

7. 发布到NPM：

   确保你的package.json文件中设置了正确的名称和版本。

• 登录到你的NPM账户：

npm login

• 发布库：

npm publish

这样你就创建了一个简单的React组件库，并且可以通过Vite进行快速开发和构建。你可以根据需要添加更多的组件和功能。