Vite打包组件库

动机

去年使用vue3 + TSX封装组件，结果卡在了打包上，直到最近发现，vite提供了tsx的打包插件。

组件准备

手把手创建Vue3组件库

在packages/index.ts中引入相关的组件、工具库、样式。

Vite配置

// bin/build.js
// node包，commonjs规范
const path = require('path')
const { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue') 
const vueJsx = require('@vitejs/plugin-vue-jsx')

// 打包的入口文件
const entryDir = path.resolve(__dirname, '../packages')
// 出口文件夹
const outDir = path.resolve(__dirname, '../lib')
// vite基础配置
const baseConfig = defineConfig({
  configFile: false,
  publicDir: false,
  plugins: [vue(), vueJsx()]
})
// rollup配置
const rollupOptions = {
  // 确保外部化处理那些你不想打包进库的依赖
  external: [
    'vue'
  ],
  output: {
    // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
    global: [
      vue: 'Vue'
    ]
  }
}
// 全量打包构建
const buildAll = async () => {
  await build({
    ...baseConfig,
    build: {
      rollupOptions,
      lib: {
        entry: path.resolve(entryDir, 'index.ts'),
        name: '', // umd的变量名
        fileName: (format) => `index.${format}.js`, // 输出文件名
        formats: ['es', 'umd'],
      },
      outDir
    }
  })
}
const build = async () => {
  await buildAll()
}
build()

pkg#scripts

"scripts": {
  "build:lib": "node ./bin/build.js"
}

声明组件模块

防止typescript中引入module报错

// packages/vue.d.ts
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}