vue 批量打包库模式 或 WebComponents批量打包
使用nodejs
const fs = require('fs')
let readDir = fs.readdirSync('./src/views/temp/')
// 筛选文件
readDir = readDir.filter(item => {
return /^[A-z]+[0-9]+\.vue$/.test(item)
})
// 去除尾部
buildName = readDir.map(item => {
return item.slice(0, -4)
})
// 转换组件名数组 这里我只是把数字结尾的组件前面加个横向 如果你不需要,可自行修改
const compName = buildName.map(item => {
const index = item.search(/[\d]/)
return item.slice(0, index) + '-' + item.slice(index)
})
//使用这个node执行命令的方法
const exec = require('child_process').exec;
execFunc(0)
// 循环打包函数
function execFunc(index) {
console.log('strat'); //这里是打包后的文件名,也是组件引用时候的名 后面这个是vue组件的名字
exec(`npm run build:lib -- --name ${compName[index]} src/views/temp/${buildName[index]}.vue --no-clean`, (err, stdout, stderr) => {
if (err){
console.log(err);
console.warn(' 编译命令执行失败');
} else {
console.log('end');
if (index < compName.length) {
execFunc(++index)
}
}
});
}
想要优化的好看一点,高大上一点不?
注意这块需要
npm i colors-console -G
这一堆代码 你只需要修改readDir,compName与buildName,变成你想要的文件和文件名,就能使用去搞个好看的批量打包功能了
const fs = require('fs')
const colors = require('colors-console')
const { unlink } = fs
let readDir = fs.readdirSync('./src/views/temp/')
// 筛选文件
readDir = readDir.filter(item => {
return /\.vue$/.test(item)
})
// 去除尾部
buildName = readDir.map(item => {
return item.slice(0, -4)
})
// 转换组件名数组
let compName = buildName.map(item => {
const index = item.search(/[\d]/)
return item.slice(0, index) + '-' + item.slice(index)
})
const exec = require('child_process').exec
execFunc(0)
// 循环打包函数
function execFunc(index) {
exec(
`npm run build:lib -- --name ${compName[index]} src/views/temp/${buildName[index]}.vue --no-clean`,
(err, stdout, stderr) => {
if (err) {
console.log(err)
console.warn(' 编译命令执行失败')
} else {
console.clear()
let strOver = '|'.repeat(index+1)
let strWait = '-'.repeat(compName.length - index-1)
console.log(
`${colors(['green', 'greenBG'], strOver)}${colors(
['red', 'redBG'],
strWait
)} ${index+1}/${compName.length}`
)
if (index+1 < compName.length-1) {
execFunc(++index)
} else {
delimitersFile()
}
}
}
)
}
// 删除打包出来的无用文件
function delimitersFile() {
let delDir = fs.readdirSync('./dist/')
delDir = delDir.filter(item => {
return /\.common\.js$|\.umd\.js$/.test(item)
})
let num = 0
let rotate = ['-','\\','|','/']
doDel()
// 删除命令
function doDel() {
unlink(`./dist/${delDir[num]}`, err => {
console.clear()
console.log(
`${colors(
'yellow',
`打包完成,正在删除多余组件 ${num}/${delDir.length} `
)} ${colors('green',rotate[num%4])}`
)
if (num < delDir.length) {
num++
doDel()
}
})
}
}
最后就会像这样 当然,如果你弄明白我的这个打包文件,你也一定能整出来个更酷炫的就像nuxt的打包那种