动机

去年应用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.tsdeclare module '*.vue' {  import { DefineComponent } from 'vue'  const component: DefineComponent<{}, {}, any>  export default component}