动机
【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
}
