动机

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