vite+react+antd，封装公共组件并发布npm包

一 概述

        为了公司项目系统风格统一，需要对部分公共组件进行封装。此文便是为了记录自己在探索过程中的步骤和注意点。这个例子主要是根据UI设计的样式封装一个antd中的弹窗组件。

二 了解NPM

        NPM（Node Package Manager）是一个 JavaScript 包管理工具，也是 Node.js 的默认包管理器（是 Node.js 自带的包管理工具，只要安装了 Node.js，NPM 就会自动安装在系统中）。

1. 作用

        用于安装、共享和管理项目依赖的代码库（称为“包”或“模块”）。

2. 核心功能

3. 核心文件：package.json

4.重点要求

        package.json中，除了dependencies、devDependencies，还有一个peerDependencies（开发包时候需要用到）。下面是这三者的区别，如下所示：

具体内容如下：

（1）dependencies（生产依赖）

        作用：项目运行时必须的依赖（如 React、ReactDOM、Redux）。

        安装命令：npm install xxxxxx  或 yarn add  xxxxxx

        特点：会被打包到最终的生产环境代码中（如 build/ 目录）；安装时递归安装子依赖。

（2）devDependencies（开发依赖）

        作用：仅在开发阶段需要的工具（如测试库、打包工具、ESLint）。

        安装命令：npm install xxxxxx--save-dev  或 yarn add xxxxxx -D

        特点：不会打包到生产代码中；其他项目安装你的包时不会安装这些依赖

（3）peerDependencies（同伴依赖）

        作用：声明你的包需要宿主环境提供的依赖（避免重复安装/版本冲突），常见于 React 组件库。

        安装命令：npm install your -lib   

        特点：

                用户安装你封装的库时，需手动安装 peerDependencies里面的内容，如果版本不匹配，会抛出警告。

如何定义（写入） ：

        npm install react --save-peer 

        或 yarn add react --peer  

        或 手动编辑package.json中的peerDependencies 对象

 三  使用vite进行react项目创建。

运行效果如下：