Question

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

GENERATE_SOURCEMAP = false

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

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

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

Answer 1

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

lib.js

.parent {
  width: 100%;
  background: red;
  height: 100px;
  display: flex;
  justify-content: center;
}

.parent div {
  padding: 0 10px;
}

此外，在package.json中添加脚本命令： 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 !'))

您只需输入"build-all": "node ./src/build/lib.js"。就这样〜

如何在vue-cli3.0中运行一个命令来分别捆绑库和输出？

1 个答案: