优化qiankun微前端的程序启动

361 阅读1分钟

原有启动方式

按照启动项目逐一启动,需要开启多个窗口
npm run xxx项目一 、npm run xxx项目二 。。。

优化

不用拆分多个终端窗口,一行命令启动多个项目。支持自定义选择启动项目

//目前能够并行执行多个的命令
const readline = require('readline');
const { spawn,spawnSync } = require('child_process');

// 创建 readline 接口
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// 定义项目启动命令和顺序
const projectCommands = [
  'npm run start:main', // 替换为您项目1的启动命令
  'npm run start:html', // 替换为您项目2的启动命令
  'npm run start:react', // 替换为您项目3的启动命令
];

// 打印项目选项
console.log('Available Projects:');
projectCommands.forEach((command, index) => {
  console.log(`${index + 1}: Start Project ${command.split(':')[1]}`);
});

// 提示用户输入项目序号,以逗号分隔多个项目
rl.question('Enter project numbers to start (e.g., 1, 2, 3): ', (input) => {
  rl.close();

  const selectedProjects = input.split(',').map(Number).filter(Boolean);

  if (selectedProjects.length === 0) {
    console.log('No projects selected. Exiting.');
    process.exit(0);
  }

  const commandsToRun = selectedProjects.map((projectIndex) => {
    const projectCommand = projectCommands[projectIndex - 1];
    if (projectCommand) {
      return projectCommand;
    }
    console.error(`Invalid project number: ${projectIndex}`);
    process.exit(1);
  });
  // 启动项目
  console.log('commandsToRun',commandsToRun);
  //'--verbose',
  const child = spawn('concurrently', [...commandsToRun], { stdio: 'inherit' });

  child.on('exit', (code) => {
    if (code === 0) {
      console.log('All projects have started successfully.');
    } else {
      console.error('Error starting projects.');
    }
  });
});

package配置:

{
  "name": "qiankun-dome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start:dev": "node start.js",
    "examples:install": "npm-run-all --serial install:*",
    "examples:start": "npm-run-all --parallel start:*",
    "install:main": "cd examples/main && yarn",
    "start:main": "cd examples/main && yarn start",
    "install:html": "cd examples/html-demo && yarn",
    "start:html": "cd examples/html-demo && yarn start",
    "install:react": "cd examples/react-demo && yarn",
    "start:react": "cd examples/react-demo && yarn start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "npm-run-all": "^4.1.5",
    "qiankun": "^2.10.13",
    "readline": "^1.3.0"
  },
  "devDependencies": {
    "concurrently": "^8.2.1"
  }
}

启动命令: npm run start:dev

项目地址:github.com/Z3-FE/qiank…

演示:

image.png