酒店设计网站推荐,中国建设电工立网站,南京林业大学实验与建设网站,网站建设及维护推广合同在开发项目的过程中#xff0c;我们经常需要安装插件依赖#xff0c;那么怎么把自己开发的组件封装成一个插件#xff0c;并发布到npm 插件市场或者上传到私有仓库里面呢#xff1f;今天总结下自己发布插件到私有仓库的记录#xff1a;
一、创建组件
执行命令创建一个空…在开发项目的过程中我们经常需要安装插件依赖那么怎么把自己开发的组件封装成一个插件并发布到npm 插件市场或者上传到私有仓库里面呢今天总结下自己发布插件到私有仓库的记录
一、创建组件
执行命令创建一个空项目npm create vite 在 src 目录下面创建一个文件 package 存放组件和公共的JS方法。 重点说明下 packages/index.js 因为插件需要支持按需引入和全局引入所以这里搞了2种方式整个案例如下
import { getCurrentInstance } from vue
import EosVtable from ./tableconst 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 祝好
