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

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

一、创建组件

1. 执行命令创建一个空项目：npm create vite
2. 在 src 目录下面创建一个文件 package 存放组件和公共的JS方法。
   
3. 重点说明下 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

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

二、打包组件

1. 在 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"
  }
}

2. 设置 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'
        },
      },
    },
  }
})

3. 执行打包命令pnpm run build进行打包插件 会看到生成的 dist 文件就是整个插件的代码了。

三、npm 上传插件

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

上传到npm 官方

1. 登录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

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

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

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

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

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

over ！ 祝好！

原文地址：https://blog.csdn.net/well2049/article/details/144305772

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！