动机

去年应用 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
}