使用vue3、vite打包项目中组件库中的某一个组件，并将其推送至npm上
最近公司人手不够，老板将一个项目交给外包团队进行协助开发，老板又不希望外包团队可以看某些业务上的组件代码，让我解决这个问题；查找了一下解决方案，可以将组件类似于项目打包一样，将其打包成一个依赖组件，可以npm install 去下载，并且组件打包后，.vue文件会被打包成js文件，想要阅读起来也非常困难。
大致的组件目录如下
一、创建组件目录
我创建了一个私有组件库目录privateComponent，这个组件用于存放要打包的组件。
二、组件配置
我要打包的组件是HMap组件，那么我在HMap组件下创建index.ts文件，编写挂载方法并抛出
// index.ts
import type { App } from 'vue'
import MyMap from "./index.vue"
// 使用install方法，在app.use挂载
MyMap.install = (app: App) => {
app.component(MyMap.__name as string, MyMap) //注册组件
}
export default MyMap
三、组件主入口
在privateComponent下创建index.ts文件作为主入口文件，并且将需要打包的组件在其中注册，这里我将HMap进行了引入。
// index.ts
import type { App } from 'vue'
import MyMap from './HMap'
// 所有组件列表
const components = [
MyMap,
]
// 定义 install 方法
const install = (app: App): void => {
// 遍历注册所有组件
components.forEach(component => app.component(component.__name as string, component))
}
export {
MyMap,
}
const HComponents = {
install
}
export default HComponents
四、vite.config.ts文件配置。
在privateComponent目录里下创建一个vite.config.ts文件，编写对应的打包配置，
rollupOptions这里需要根据组件用到了哪些依赖库，就需要写上，不然打包后组件使用会报错。
//vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const pathResolve = (dir: string) => {
return resolve(__dirname, '.', dir);
};
const alias: Record<string, string> = {
'@': pathResolve('./src'),
};
export default defineConfig({
base:'./',
build:{
outDir: 'my-map/dist', //输出文件名称
lib:{
entry: resolve(__dirname, './index.ts'), //指定组件编译入口文件
name: 'MyMap',
fileName: 'my-map'
},//库编译模式配置
rollupOptions: {
external: ['vue','zrender','pinia'],
output: {
exports: 'named',
globals: {
vue:'Vue',
zrender:'zrender',
pinia:'pinia'
}
}
},
minify: 'terser',
terserOptions: { // 在打包代码时移除 console、debugger 和 注释
compress: {
drop_console: true, // 生产环境时移除console
drop_debugger: true // 生产环境时移除debugger
},
format: {
comments: false // 删除注释comments
}
}
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias,
}
})
五、package文件配置。
在privateComponent目录里下创建package.json文件，只需要写一个build脚本即可。
六、打包。
以上步骤都完成后，进入到privateComponent目录下，执行npm run build
打包命令执行完成后，就可以看到privateComponent目录下生成了一个名为my-map的文件，这就是打包后的组件。
测试组件是否能够正常使用，在需要使用这个组件的页面通过dist包下的my-map.js文件引入组件，记得还要将样式文件在main中引入；在组件引入后，发现可以正常使用，页面也可以正常显示，说明我们打包后的组件可以正常使用。
到这一步就可以解决老板的需求了，我可以在git的.gitignore文件中配置，忽略HMap组件不上传这个文件，只上传我打包后的组件就可以了。
七、上传至npm
如果你的组件可以开放给所有人用，那么你还可以将你的组件上传至npm上，其他人可以通过npm install去下载；进入你的组件目录，执行npm init -y，生成了一个package文件。
修改package文件main主入口地址，指向你的组件入口地址。
然后执行以下命令，根据提示登录后推送即可，然后就可以打开npm管网搜索你的组件了。
npm login
npm publish注：npm login 大概率登录会超时，需要设置代理才能进行登录，在后面拼上你的ip代理地址即可。
查看你的代理ip地址，按照以下设置后，就能够登录成功，推送的你组件到npm上了
npm config get proxy http://你的代理ip和端口
npm config get https-proxy http://你的代理ip和端口推送完成后记得删除代理，否则会影响你后续使用npm install时会导致下载超时失败。
//删除代理
npm config delete proxy
npm config delete https-proxy