插件的生成及使用 - NPM
一、前置条件
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 <组件名 />
}