一、前置条件

1. 安装 Node.js（自带 npm）

2. 注册 npm 官网账号，完成邮箱验证（必填）

二、项目初始化

mkdir 包名 && cd 包名
npm init -y

修改package.json核心配置：

1.name：全网唯一包名

2.version：初始版本1.0.0

编写组件核心代码，新建index.js/index.vue入口文件

可选：新建.npmignore忽略 node_modules、.git 等文件

三、发包核心准备（必做）

切换官方源（淘宝镜像无法发包）：

npm config set registry https://registry.npmjs.org/

四、登录 & 发布

# 登录npm账号

npm login

#更新版本号 （版本号不可重复，更新后重新发布）

npm version patch # 修复bug（1.0.0→1.0.1）
npm version minor # 新增功能（1.0.0→1.1.0）
npm version major # 重大更新（1.0.0→2.0.0）
npm publish

# 普通组件包发布

npm publish

# 作用域包（@xxx/xxx）发布

npm publish --access public

五、撤回包（慎用）

发布24小时内可撤回，撤回版本号永久作废

npm unpublish 包名@版本号

六、发包避坑要点

• 发包仅限官方源，发布后可切回淘宝镜像

• 包名全网唯一，重复直接报错

• 作用域包必须加 --access public 公开发布

• 未验证邮箱无法登录发包

七、组件发包后使用流程（前端专属）

1. 安装组件

# 普通包

npm install 你的包名

# 作用域包

npm install @用户名/包名

2. 项目引入使用

通用 JS/TS 引入

import 组件名 from '你的包名'

// 或

const 组件名 = require('你的包名')

Vue 组件使用

import 组件名 from '你的包名'

import '你的包名/dist/style.css' // 有样式则引入

export default {

components: { 组件名 }

}

React 组件使用

import 组件名 from '你的包名'

import '你的包名/dist/style.css'

function App() {

return <组件名 />

}