使用vue3、vite打包项目中组件库中的某一个组件，并将其推送至npm上

最近公司人手不够，老板将一个项目交给外包团队进行协助开发，老板又不希望外包团队可以看某些业务上的组件代码，让我解决这个问题；查找了一下解决方案，可以将组件类似于项目打包一样，将其打包成一个依赖组件，可以npm install 去下载，并且组件打包后，.vue文件会被打包成js文件，想要阅读起来也非常困难。

大致的组件目录如下

一、创建组件目录

我创建了一个私有组件库目录privateComponent，这个组件用于存放要打包的组件。

二、组件配置

我要打包的组件是HMap组件，那么我在HMap组件下创建index.ts文件，编写挂载方法并抛出

javascript 复制代码

// 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进行了引入。

javascript 复制代码

// 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这里需要根据组件用到了哪些依赖库，就需要写上，不然打包后组件使用会报错。

javascript 复制代码

//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管网搜索你的组件了。

javascript 复制代码

npm login

npm publish

注：npm login 大概率登录会超时，需要设置代理才能进行登录，在后面拼上你的ip代理地址即可。

查看你的代理ip地址，按照以下设置后，就能够登录成功，推送的你组件到npm上了

javascript 复制代码

npm config get proxy http://你的代理ip和端口
 
npm config get https-proxy http://你的代理ip和端口

推送完成后记得删除代理，否则会影响你后续使用npm install时会导致下载超时失败。

javascript 复制代码

//删除代理
npm config delete proxy
npm config delete https-proxy