npm发布插件到私有仓库保姆级教程

在开发项目的过程中，我们经常需要安装插件依赖，那么怎么把自己开发的组件封装成一个插件，并发布到npm 插件市场或者上传到私有仓库里面呢？今天总结下自己发布插件到私有仓库的记录：

一、创建组件

执行命令创建一个空项目：npm create vite
在 src 目录下面创建一个文件 package 存放组件和公共的JS方法。
重点说明下 packages/index.js 因为插件需要支持按需引入和全局引入，所以这里搞了2种方式：整个案例如下

import { getCurrentInstance } from 'vue'
import EosVtable from './table'

const components = [EosVtable]
export { EosVtable, setGlobalConfig }

// 用于按需导入
const setGlobalConfig = (option) => {
const { appContext } = getCurrentInstance()
Set_Provide(option, appContext)
}

const Set_Provide = (option, app) => {
const context = computed(() => {
const cfg = unref(option)
return cfg
})
for (const key in option) {
app.config.globalProperties[$${key}] = context.value[key]
}
}

// 定义 install 方法全局引入
const install = (app, option) => {
if (install.installed) return;
install.installed = true
components.map(component => {
app.component(component.name, component)
})
if (option) Set_Provide(option, app)
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}

const installer = () => {
return {
install,
setGlobalConfig,
}
}

export default installer()

补充下组件下的index.js下的组件暴露方法：

import Vtable from "./index.vue"
Vtable.name = "EosVtable"
Vtable.install = function (Vue) {
  Vue.component('EosVtable', Vtable)
}
export default Vtable

到这一步组件已经开发完毕，接下里就是上传到私有仓库的操作了。

二、打包组件

在 package.json里面配置包的名称，版本号，导出路径等相关信息。切记每次上传时要记得修改版本号，否则会报错的。照着我的抄，改成自己的名称即可。

{
"name": "@eosine/vtable",
"private": false,
"version": "0.0.14",
"type": "module",
"main": "dist/@eosine-vtable.umd.cjs",
"module": "dist/@eosine-vtable.js",
"files": [
"dist/*"
],
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"build:watch": "vite build --watch",
"pushnpm": "npm publish"
},
"dependencies": {
"pinyin-match": "^1.2.6",
"unplugin-auto-import": "^0.18.3",
"vue": "^3.5.10",
"vxe-pc-ui": "^4.2.18",
"vxe-table": "4.7.85",
"vxe-table-plugin-element": "^4.0.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.4",
"sass": "^1.79.4",
"vite": "^5.4.8"
}
}
设置 vite.config.js这里主要是设置插件的入口文件地址 lib , 完整案例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import AutoImport from "unplugin-auto-import/vite"
const resolve = (dir) => path.join(__dirname, dir);
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: [
// 需要自动导入的API，自动导入vue和vue-router相关函数
'vue',
'vue-router',
'pinia',
],
// 指明 .d.ts 文件的位置和文件名，生成 auto-import.d.ts 全局声明
dts: 'src/types/auto-import.d.ts',
}),
],
resolve: {
alias: {
"@": path.resolve(__dirname, './src'),
},
},
build: {
rollupOptions: {
// 请确保外部化那些你的库中不需要的依赖
external: ['vue', 'element-plus'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue',
},
},
},
lib: {
entry: "src/packages/index.js",
name: "@eosine/vtable",
fileName: "@eosine-vtable"
},
},
server: {
host: true,
open: true,
proxy: {
'/api': {
target: 'http://XXX.com'
},
'/M00': {
target: 'http://XXX.com'
}
}
},
vite: {
css: {
preprocessorOptions: {
scss: {
api: 'modern-compiler', // or 'modern'
},
},
},
}
})
执行打包命令pnpm run build进行打包插件会看到生成的 dist 文件就是整个插件的代码了。

三、npm 上传插件

插件既可以上传到npm 市场，也可上传到公司内部的私有仓库里。2种方案都给大家说下吧

上传到npm 官方

登录npm, 执行命令 npm login , 没有账户的自行注册，上传失败的，检查npm 代理路径是否为官方的，如果是淘宝镜像需要自行切换到官方才可使用，包名是否已经在插件市场存在。

设置 npm 的 registry 为官方源 npm config set registry https://registry.npmjs.org

这里推荐一个工具 nrm 来统一维护自己的镜像，全局安装以下或者自行百度该插件，主要使用命令就是新增和切换镜像：nrm use 和 nrm ls

直接执行命令 npm publish 进行上传即可,到npm 官网查看是否发布成功

四、上传到私有仓库

上面说了那么多，重点核心来了，如何上传到私有仓库呢？前提需要咱们的服务器部署私有仓库环境，

目前主流使用的都是Verdaccio 首次上传时需要把咱们的镜像切换到自己的私有仓库镜像，并进行登录，

切换镜像 nrm use eos

登录 npm login 输入完账号和密码，

执行最后的上传命令npm publish ，即可大功告成。

能看到这里的兄弟们幸苦了，必须再送各位一波福利，终极大招，项目调试插件。

五、插件联调

这里必须再上一个命令，非常少用的：npm link

插件热更新，实时监听插件的代码变化，并随时打包dist文件。npm run build:watch
注意在package.json 添加该命令
在主项目里面进行链接到插件 npm link [插件名称] --global , 这里特别提示下，如果不起作用，就需要把主项目里面下载的这个依赖包进行remove 掉，重新链接。成功后如下。

这里再送出最后一个福利（被抖音直播洗脑了）哈哈，如果插件有固定的前缀，可以在本机环境下配置下：找到本机的 .npmrc 文件，或者在主项目根目录也行，添加镜像切换：

这样以后只要登录成功一次，后面就不需要再切换镜像和重复登录了。

友情提示：如果上传失败，要检查是否修改版本号了，其次登录npm 成功后，上传完成，要及时把镜像切换回去。

补充创建软链，也可自行百度

over ！祝好！