Vite打包Vue自定义组件

如果组件需要复用，就要能够独立发布和部署，被其它应用引用。开发组件时，需要创建引用组件的app便于开发和测试，而发布时，只应该包括组件部分。使用vite可以实现组件的打包发布。

需要创建一个入口文件，在这个文件中引用并导出组件：

import hello from '../components/HelloWorld.vue'

export {hello}

假设这个文件的名称为main.js，位于src/lib目录中，这个文件区别于测试环境的main.js。
在vite.config.js中增加build项，用来指定入口文件，输出目录，并且排除vue等基础组件，减少打包的尺寸。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'src/lib/main.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

在package.json中指定打包的入口：

  "name": "my-vue-app",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  },

运行npm run build可以生成发布包。
创建一个新的项目进行测试，如果组件在本地目录中，可以使用npm install <路径>进行安装。
在需要引用的页面中：

<script setup>
import {hello} from 'my-vue-app'
</script>

<template>
    <hello msg="你好" />
</template>