前端之vue 配置前端项目npm一键启动，前端项目批量启动

因业务需求，项目需要使用微应用。最后选择了蚂蚁金服开源的微前端框架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