在日常的开发过程中，为了能更加方便，快捷的完成工作，我们经常会引用npm上其他程序员已经封装好的包来实现自己的功能。那么我们在日常的学习和工作中如何发布一个自己的npm包呢？
发布一个npm包的前提是我们需要拥有的npm账号！
进入官网后，点击注册，注册一个属于自己的账号。
注册完成后，打开本地编辑器基于vite 搭建一个开发环境vite官方中文文档
- 在src目录下创建一个组件文件（我这里命名components），在component文件夹下创建自己的组件。
erDiagram
components ||--o{ ListDnd : contains
ListDnd ||--|{ index : contains
- 在index中进行组件的开发
- 配置vite：创建或修改
vite.config.ts文件来配置 Vite 以支持组件打包。
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
build: {
lib: {
entry: 'src/components/DndList/index.ts', // 组件入口文件
name: 'ListDnd', // 组件名称
fileName: (format) => `@zlist-dnd.${format}.js`, // 输出文件名
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['react', 'react-dom'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供全局变量
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
},
},
},
})
- 配置package.json: 在
package.json中添加必要的字段，如入口文件、脚本命令等。
{
"name": "list-dnd",
"version": "1.0.0",
"description": "一个基于 antd 组件开源的可拖拽的 List 组件！",
"main": "dist/@zlist-dnd.umd.js",
"module": "dist/@zlist-dnd.es.js",
"repository": {
"type": "git",
"url": "https://gitee.com/zxyandjyy/dnd_list"
},
"scripts": {
"build": "vite build"
},
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
"author": "Your Name",
"license": "MIT"
}
main和module：分别指定组件的 UMD 和 ES 模块的入口文件（在执行npm run build后需要修改当前的文件名与生成的文件保持一致，名称配置正确的忽略这一步）。- scripts: 添加
build命令用于执行 Vite 构建。 peerDependencies：声明组件依赖的外部库，这些库不会被打包进组件，而是由使用组件的项目自行安装。repository: 在npm上展示的对应的git 仓库地址。
- 打包组件
运行
build命令来打包组件：
// 在控制台运行命令
npm run build
执行此命令后，Vite会根据配置，将组件打包到dist目录。
- 登录npm
// 在控制台输入命令，然后根据提示登录账号（控制台会有提示，根据提示操作）
npm login
按照提示输入用户名、密码和邮箱。
7.在确认所有配置和打包都无误后，即可发布组件到 npm。
// 在控制台运行命令
npm publish
注意事项：
- 版本管理：每次更新组件后，要更新
package.json中的version字段，遵循语义化版本规则。 - README文件：在项目根目录下创建
README.md文件，详细描述组件的使用方法、特性等，方便其他开发者使用。 - 作用域包： 若想使用作用域包（如
@yourusername/my-react-vite-component），可在package.json的name字段添加作用域，并在发布时使用npm publish --access public命令。
最后在npm 网站上登录账号，在packages中查看自己发布的npm包。
