首页 前端知识 前端之vue 配置前端项目npm一键启动,前端项目批量启动

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

2024-06-18 00:06:57 前端知识 前端哥 148 709 我要收藏

因业务需求,项目需要使用微应用。最后选择了蚂蚁金服开源的微前端框架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 installyarn 来安装项目依赖
  • 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
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12563.html
标签
评论
发布的文章

jQuery基本使用

2024-06-24 02:06:16

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!