中山市建网站公司网站开发各年的前景
在开发项目的过程中，我们经常需要安装插件依赖，那么怎么把自己开发的组件封装成一个插件，并发布到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 = truecomponents.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
2. 直接执行命令 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 ！ 祝好！