如何在vue-cli3.0中运行一条命令打包库单独输出？

Question

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

--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。就这些了~

如何在vue-cli3.0中运行一条命令打包库单独输出？

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

javascript

bundle

vue.js

vue-cli-3