vite打包
2023, Apr 09
vite打包
const path = require('path')
//引入插件
const {defineConfig,build} = require('vite')
const vue = require('@vitejs/plugin-vue')
const vueJsx = require('@vitejs/plugin-vue-jsx')
const fsExtra = require('fs-extra')
const fs = require('fs')
//打包入口文件夹
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','vue-router'],
output:{
global:{
vue:'Vue'
}
}
}
//全量打包构建
const buildAll = async ()=>{
await build({
...baseConfig,
build:{
rollupOptions,
lib:{
entry:path.resolve(entryDir,'index.ts'),
name:'qt-components',
fileName:'qt-components',
formats:['es','umd'],
},
outDir
}
})
}
//单组件的打包构建,name:组件名称
const buildSingle = async(name)=>{
await build({
...baseConfig,
build:{
rollupOptions,
lib:{
entry: path.resolve(entryDir,name),
name:'index',
fileName:'index',
formats:['es','umd']
},
outDir:path.resolve(outDir,name)
}
})
}
//每个组件生成package.json
const createPackageJson = (name)=>{
const fileStr = `
{
"name": "${name}",
"main": "index.umd.js",
"module": "index.es.js",
"style": "style.css"
}
`
//输出
fsExtra.outputFile(
path.resolve(outDir,`${name}/package.json`),
fileStr,
'utf-8'
)
}
//打包成库
const buildLib = async ()=>{
await buildAll()
//获取组件名称组成的数组
const components = fs.readdirSync(entryDir).filter(name=>{
const componentDir = path.resolve(entryDir,name)
const isDir = fs.lstatSync(componentDir).isDirectory()
return isDir&&fs.readdirSync(componentDir).includes('index.ts')
})
//循环构建
for(const name of components){
await buildSingle(name)
createPackageJson(name)
}
}
buildLib()