我如何运行一个命令来捆绑库并在vue-cli3.0中单独输出？

Question

我已经阅读了VUE-CLI3.0中的build library文档。我的目录：

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

我想用一个条目“ libs.js运行一个命令” （也许在libs.js中有一个循环来创建多个条目）捆绑我的组件分别。目标文件夹可能如下所示：

--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

有人可以给我一些建议吗？

Answer 1

我添加了一个脚本文件。在其中，我获得了组件列表，并使用“ child_process”执行每个命令。下面是一个示例：

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 !'))

还有什么

，在package.json中添加脚本命令："build-all": "node ./src/build/lib.js"您只需输入npm run build-all。就这样〜