vue 库模式打包 批量

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的打包那种