因业务需求，项目需要使用微应用。最后选择了蚂蚁金服开源的微前端框架qiankun。开发过程中发现每天都要同时启动多个项目，打包也得同时打包多个。一个一个点开，再运行命令确实比较麻烦，因此有了一键启动，一键打包的想法。
基本思路就是使用node创建多个子流程，然后打开cmd窗口，并且输入设定好的命令，执行。
1.创建文件目录
- 首先我们创建一个projects文件夹，里面存放我们需要运行的项目，然后在projects文件夹下使用vue-cli3创建五个项目，分别为test1、test2、test3、test4、test5
- 然后创建我们的项目启动配置文件夹npm-config，并且在npm-config文件夹下打开cmd窗口，使用npm init 创建package.json文件
- 创建好package.json后，在npm-config文件夹里创建config文件夹，用来存放启动配置js文件
- 在config 文件夹下创建 start.js，install.js，build.js，run-util.js
创建好后目录如图
image.png
这里为了统一，请确保每个项目的启动命令均为 npm run serve
2.修改package.js
{
"name": "lm-project-list",
"version": "0.1.0",
"private": true,
"scripts": {
"init": "node config/install.js npm",
"cinit": "node config/install.js cnpm",
"yinit": "node config/install.js yarn",
"serve": "node config/start.js",
"dev": "node config/start.js",
"build": "node config/build.js",
"lint": "vue-cli-service lint"
}
}
scripts里面时npm运行的命令
node config/install.js 表示使用 node 来执行 config 文件夹下的 install.js 文件，其他同理
- init 用来执行 npm run init ，运行后给所有项目执行 npm install 安装项目依赖，同样cinit，yinit 分别执行 cnpm install 和 yarn 来安装项目依赖
- server 命令用来执行每个项目的 npm run serve 命令,启动项目
- build 命令用来执行每个项目的 npm run build 命令，打包项目
3.run-util.js
由于执行代码相似，仅有运行命令不同，所以我们把运行的代码封装在 run-util.js 中，其他文件调用，传递参数即可
这里简单做下说明：
- const sub_app_ath = path.resolve(__dirname,'../../')
该行用于获取项目所在的父级文件，__dirname为当前文件所在的绝对路径，想要找的项目的父级文件夹，就的向上两层，所以是../../ - const defaultAllApps=[test1'、'test2'、'test3'、'test4'、'test5'] //项目文件夹目录
这里指定了一些默认要执行的项目文件夹名称 - const dirs=fs.readdirSync(sub_app_ath) //所有目录
获取项目所在的父级文件夹下的所有文件夹 - const child_process = require('child_process') 创建子流程
- command参数用于传递执行命令
- CK参数用于传递运行完成后是否关闭打开的cmd窗口，其中K表示不关闭，C表示关闭
- start cmd.exe /{i} && ${command}" 打开cmd窗口，并执行命令
/**
*
* 读取文件夹并运行服务
*/
const fs = require('fs');
const path = require('path');
const sub_app_ath = path.resolve(__dirname,'../../');
const defaultAllApps=[test1'、'test2'、'test3'、'test4'、'test5'] //项目文件夹目录
const dirs=fs.readdirSync(sub_app_ath) //所有目录
const child_process = require('child_process')
const commandObj={
serve:'启动',
dev:'启动',
build:'打包',
install:'下载依赖'
}
function run(command,config={}) {
let {CK='K',apps=[]}=config
let myApps=(apps instanceof Array && apps.length) ? apps : defaultAllApps
let runApps=dirs.filter(i => myApps.includes(i))
for(let i in commandObj){
if(new RegExp(i).test(command)){
console.log(`${commandObj[i]}项目：${myApps.join(' ')}`)
break
}
}
runApps.forEach(async i => {
child_process.exec(`start cmd.exe /${CK} "cd ../${i} && ${command}"`)
})
}
function processOn() {
process.on('unhandledRejection', (reason, p) => {
console.log('Unhandled Rejection at: Promise', p, 'reason:', reason);
})
}
module.exports={
run,
processOn
}
4. start.js，build.js，install.js文件
process.argv 用来接收 npm 传递的参数，我们可以在命令后面传递需要启动的项目目录名称，如果不传，则使用run-util.js中定义的默认目录
start.js
/**
*
* 运行服务
*/
const runUnit=require('./run-util')
console.log(process.argv)
let apps=process.argv.slice(2) //需要运行的文件目录
console.log(apps)
runUnit.run('npm run serve',{apps})
runUnit.processOn()
build.js
/**
/**
*
* 打包项目
*/
const runUnit=require('./run-util')
console.log(process.argv)
let apps=process.argv.slice(2) //需要运行的文件目录
console.log('开始打包...')
runUnit.run('npm run build',{apps,CK:'C'})
runUnit.processOn()
install.js
/**
* 拉取依赖
*/
const runUnit=require('./run-util')
console.log(process.argv)
console.log('开始拉取依赖包...')
let apps=process.argv.slice(3) //需要运行的文件目录
runUnit.run(`${process.argv[2]} install`,{apps,CK:'C'})
runUnit.processOn()
5.运行
/**
所有项目下载依赖
**/
npm run init
/**
test1 test5项目下载依赖
**/
npm run init test1 test5
/**
所有项目启动
**/
npm run serve
/**
test2 test3项目下载依赖
**/
npm run serve test3 test2
/**
所有项目打包
**/
npm run build
/**
test2 test4 test5项目打包
**/
npm run init test2 test4 test5