使用 Vite 构建一个 React 组件库，并发布到 npm。

项目结构

• dist打包生成的文件目录
  • xxxxx.js
• docs文档目录
  • xxx.md
• packages组件目录
  • Tree树组件
    • index.ts入口
    • tree.tsx组件
    • styles.css样式
    • types.d.ts类型定义
  • Button按钮组件
    • index.ts入口
    • button.tsx组件
    • styles.css样式
    • types.d.ts类型定义
  • index.ts组件汇总
  • vite.d.ts类型定义
• example示例目录
  • index.html示例页面
  • App.tsx
  • main.tsx
• package.json包管理
• vite.config.tsVite 配置
• tsconfig.jsonTS 配置
• README.md说明文档

提示

package.json 可以使用 npm init -y 进行生成;

tsconfig.json 可以通过 tsc --init 进行生成;

所需的依赖

npm

npm install vite -D # vite 构建工具
npm install @vitejs/plugin-react-swc -D # 插件编译React
npm install vite-plugin-dts -D #生成d.ts文件 声明文件
npm install react #react依赖
npm install react-dom #react依赖
npm install @types/react -D # 类型
npm install @types/react-dom -D # 类型
npm install @types/node -D # 类型

pnpm

pnpm add -D # vite 构建工具 vite
pnpm add -D # 插件编译React @vitejs/plugin-react-swc
pnpm add -D #生成d.ts文件 声明文件 vite-plugin-dts
pnpm add react #react依赖
pnpm add react-dom #react依赖
pnpm add -D # 类型 @types/react
pnpm add -D # 类型 @types/react-dom
pnpm add -D # 类型 @types/node

yarn

yarn add -D # vite 构建工具 vite
yarn add -D # 插件编译React @vitejs/plugin-react-swc
yarn add -D #生成d.ts文件 声明文件 vite-plugin-dts
yarn add react #react依赖
yarn add react-dom #react依赖
yarn add -D # 类型 @types/react
yarn add -D # 类型 @types/react-dom
yarn add -D # 类型 @types/node

bun

bun add -D # vite 构建工具 vite
bun add -D # 插件编译React @vitejs/plugin-react-swc
bun add -D #生成d.ts文件 声明文件 vite-plugin-dts
bun add react #react依赖
bun add react-dom #react依赖
bun add -D # 类型 @types/react
bun add -D # 类型 @types/react-dom
bun add -D # 类型 @types/node

deno

deno add -D # vite 构建工具 vite
deno add -D # 插件编译React @vitejs/plugin-react-swc
deno add -D #生成d.ts文件 声明文件 vite-plugin-dts
deno add react #react依赖
deno add react-dom #react依赖
deno add -D # 类型 @types/react
deno add -D # 类型 @types/react-dom
deno add -D # 类型 @types/node