How can I run one command to bundle libraries and output separately in vue-cli3.0?

Question

I have read the document of build library in VUE-CLI3.0. My directory:

--src
  --components
    --componentA.vue
    --componentB.vue
    ....
    --componentZ.vue
--build
  --libs.js

I want to run one command with my one entry "libs.js" (Maybe there is a loop to create multiple entries in libs.js) to bundle my components separately. The destination folder maybe like the following:

--dist
  --componentA.css
  --componentA.command.js
  --componentA.umd.js
  --componentA.umd.min.js
  ...
  --componentZ.css
  --componentZ.command.js
  --componentZ.umd.js
  --componentZ.umd.min.js

Can anyone give me some suggetions?

Answer 1

I add a script file. In which, I get the list of components and using 'child_process' to execute each command. The following is an example:

lib.js

const { execSync } = require('child_process')

const glob = require('glob')
// console font color
const chalk = require('chalk')
// loading
const ora = require('ora')

// 获取所有的moduleList
const components = glob.sync('./src/components/*.vue')
// const buildFile = path.join(__dirname, 'build.js')
// const webpack = require('vuec')
const spinner = ora('Packaging the components...\n').start()
setTimeout(() => {
  spinner.stop()
}, 2000)

for (const component of components) {
  // const file = path.join(__dirname, module);
  const name = component.substring(component.lastIndexOf('/') + 1).slice(0, -4)

  const cmd = `vue build -t lib -n ${name} ${component} -d lib/components/${name}`
  execSync(cmd)

  console.log(chalk.blue(`Component ${name} is packaged.`))
}
console.log(`[${new Date()}]` + chalk.green('Compeleted !'))

What's more, add a script command in package.json: "build-all": "node ./src/build/lib.js"

You just enter npm run build-all. That's all~