utils-vue3 v0.0.30

实现个人工具和组建二合一的库 支持按需引入

打包脚本

基于vite vue工程 ts模板 使用fast-glob 读取所有文件 过滤 处理成 entry 需要的类型

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve, extname } from 'path'
import dts from 'vite-plugin-dts'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import vueJsx from '@vitejs/plugin-vue-jsx'
import glob from 'fast-glob'

// 读取目录下的所有文件 const getLists = async () => { const baseURL = resolve(__dirname, 'src') const files = await glob(**/*, { cwd: baseURL, absolute: true, })

return files.reduce((result, v) => {
	if (['.vue', '.tsx'].includes(extname(v))) {
		const paths = v.replace(resolve(__dirname), '').split('/')
		return {
			...result,
			...{
				[paths[paths.length - 2].toLowerCase()]: v.replace(
					resolve(__dirname),
					''
				),
			},
		}
	} else {
		return { ...result }
	}
}, {})

}

export default defineConfig(async ({ mode }) => { const entries = await getLists() // mode 是脚本中的参数 return { plugins: dts({ cleanVueFileName: true, copyDtsFiles: true }), cssInjectedByJsPlugin({ jsAssetsFilterFunction: function (outputChunk) { const facadeModuleId = outputChunk.facadeModuleId if (!facadeModuleId) return false return !facadeModuleId.includes('tsx') }, }), vue(), vueJsx(), , resolve: { alias: { find: '@', replacement: resolve(dirname, './src') }, { find: '@lib', replacement: resolve(dirname, './lib') }, { find: '@components', replacement: resolve(__dirname, './src/components'), }, , }, build: { minify: mode !== 'development', sourcemap: true, // 开启sourcemap lib: { // Could also be a dictionary or array of multiple entry points entry: { ...entries, index: resolve(dirname, 'src/index.ts') }, // entry: resolve(dirname, 'src/index.ts'), // 打包后的文件名称 // fileName: (mode, name) => ${name}.${mode}.js, fileName: 'index', }, rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: 'vue', output: [ { format: 'es', dir: 'dist/components', entryFileNames: 'name/index.es.js', //name对应key值，分别构建到不同文件夹 globals: { vue: 'vue', }, }, { format: 'cjs', dir: 'dist/components', entryFileNames: 'name/index.cjs.js', //name对应key值，分别构建到不同文件夹 globals: { vue: 'vue', }, }, ], }, }, } })

## 打包遇到问题

#### vite-plugin-dts 无法修改木有
#### output中目录修改成和vite-plugin-dts生成的样式文件类型一致