feat(ko): add change port for dev action

Author: shuangxu

package.json

@@ -24,15 +24,15 @@
     }
   },
   "devDependencies": {
-    "@changesets/cli": "^2.22.0",
-    "@commitlint/cli": "^17.0.0",
-    "@commitlint/config-conventional": "^17.0.0",
+    "@changesets/cli": "^2.26.0",
+    "@commitlint/cli": "^17.4.4",
+    "@commitlint/config-conventional": "^17.4.4",
     "@tsconfig/node14": "^1.0.3",
-    "@types/node": "^17.0.35",
-    "commitizen": "^4.2.4",
+    "@types/node": "^17.0.45",
+    "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "husky": "^8.0.1",
-    "prettier": "^2.6.2"
+    "husky": "^8.0.3",
+    "prettier": "^2.8.4"
   },
   "packageManager": "[email protected]"
 }

packages/ko/package.json

@@ -57,9 +57,11 @@
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
+    "detect-port": "^1.3.0",
     "dynamic-resolve-webpack-plugin": "workspace:^2.0.0",
     "esbuild-loader": "^2.19.0",
     "html-webpack-plugin": "^5.5.0",
+    "inquirer": "^8.2.2",
     "ko-lints": "workspace:^4.0.0",
     "less": "^3.13.1",
     "less-loader": "^9.1.0",
@@ -86,6 +88,8 @@
   },
   "devDependencies": {
     "@types/case-sensitive-paths-webpack-plugin": "^2.1.6",
+    "@types/detect-port": "^1.3.2",
+    "@types/inquirer": "^8.2.2",
     "@types/jest": "^27.5.1",
     "@types/lodash": "^4.14.182",
     "@types/webpack-bundle-analyzer": "^4.4.1",

packages/ko/src/actions/dev.ts

@@ -6,6 +6,8 @@ import Service from '../core/service';
 import WebpackConfig from '../webpack';
 import ActionFactory from './factory';
 import { ICliOptions } from '../types';
+import detect from 'detect-port';
+import inquirer from 'inquirer';
 
 class Dev extends ActionFactory {
   private webpackConfig: WebpackConfig;
@@ -92,13 +94,44 @@ class Dev extends ActionFactory {
     this.service.commander.bindAction(cmdName, this.action.bind(this));
   }
 
+  private async changePort(newPort: number, port: number) {
+    const question = {
+      type: 'confirm',
+      name: 'changePort',
+      message: `port: ${port} has been used，use new port ${newPort} instead?`,
+      default: true,
+    };
+    const answer = await inquirer.prompt([question]);
+    if (answer.changePort) {
+      return newPort;
+    }
+    this.errorStdout(`so sorry, ${port} already in use！！`);
+    process.exit(0);
+  }
+
+  private async checkPort(port: number) {
+    const newPort = await detect(port);
+    if (newPort === port) {
+      return newPort;
+    }
+    const isInteractive = process.stdout.isTTY;
+    if (isInteractive) {
+      return this.changePort(newPort, port);
+    }
+  }
+
   protected async action(cliOpts: ICliOptions) {
     process.title = 'ko-dev';
     process.env.NODE_ENV = 'development';
     this.service.freezeCliOptsWith(cliOpts);
     const config = await this.generateConfig();
+    const port = config.devServer?.port as number;
+    const newPort = (await this.checkPort(port)) as number;
     const compiler = Webpack(config);
-    const devServer = new WebpackDevServer(config.devServer, compiler);
+    const devServer = new WebpackDevServer(
+      { ...config.devServer, port: newPort },
+      compiler
+    );
     await devServer.start();
     const exitProcess = (callback?: () => void) => () => {
       callback && callback();