@quicktvui/web-cli 1.0.8 → 2.1.1

package/bin/qt-web-cli.js

@@ -1,8 +1,14 @@
 #!/usr/bin/env node
 
 /**
- * QuickTVUI Web Dev CLI
- * 启动 web 开发服务器，无需手动配置入口文件
+ * QuickTVUI Web CLI v2
+ *
+ * v2 架构：委托构建 + Bundle 加载模式
+ *   - 调用项目的 dev 脚本构建
+ *   - 监听 dist/dev 目录
+ *   - 启动轻量静态服务器加载 dist/dev 的 bundle
+ *
+ * v1 回退：当项目没有 dev 脚本时，使用原有的 webpack 自构建模式
  */
 
 const path = require('path')
@@ -13,8 +19,8 @@ const { exec } = require('shelljs')
 
 // 解析命令行参数
 const args = minimist(process.argv.slice(2), {
-  string: ['port', 'config'],
-  boolean: ['help', 'open', 'v', 'info', 'version', 'watch'],
+  string: ['port', 'config', 'devScript', 'distDir'],
+  boolean: ['help', 'open', 'v', 'info', 'version', 'watch', 'noAutoBuild', 'v1'],
   alias: {
     p: 'port',
     c: 'config',
@@ -26,6 +32,8 @@ const args = minimist(process.argv.slice(2), {
     port: 39001,
     open: process.env.QUICKTVUI_NO_OPEN !== 'true',
     watch: false,
+    noAutoBuild: false,
+    v1: false,
   },
 })
 
@@ -36,12 +44,12 @@ if (args.v || args.version) {
   process.exit(0)
 }
 
-// 显示详细信息（包括 web-renderer 版本）
+// 显示详细信息
 if (args.info) {
   const cliPkg = require(path.join(__dirname, '../package.json'))
   console.log(`@quicktvui/web-cli v${cliPkg.version}`)
+  console.log(`  Mode: v2 (delegate build)`)
   try {
-    // 尝试多种路径查找 web-renderer
     let rendererPkg
     const possiblePaths = [
       '@quicktvui/web-renderer/package.json',
@@ -52,9 +60,7 @@ if (args.info) {
       try {
         rendererPkg = require(pkgPath)
         break
-      } catch (e) {
-        // 继续尝试下一个路径
-      }
+      } catch (e) {}
     }
     if (rendererPkg) {
       console.log(`@quicktvui/web-renderer v${rendererPkg.version}`)
@@ -70,57 +76,274 @@ if (args.info) {
 // 显示帮助信息
 if (args.help) {
   console.log(`
-QuickTVUI Web CLI
+QuickTVUI Web CLI v2
 
 Usage:
   qt-web-cli [options]
 
 Options:
-  -p, --port <port>     开发服务器端口 (默认: 39001)
-  -c, --config <path>   自定义 webpack 配置文件路径
-  -o, --open            自动打开浏览器
-  -w, --watch           监听文件变化自动重启服务器
-  -h, --help            显示帮助信息
-  -v, --version         显示 CLI 版本
-  --info                显示 CLI 和 web-renderer 版本
+  -p, --port <port>         开发服务器端口 (默认: 39001)
+  -o, --open                自动打开浏览器
+  -h, --help                显示帮助信息
+  -v, --version             显示 CLI 版本
+  --info                    显示 CLI 和 web-renderer 版本
+  --dev-script <name>       指定要运行的 npm script (默认: dev)
+  --dist-dir <path>         指定构建产物目录 (默认: dist/dev)
+  --no-auto-build           跳过自动调用 dev 脚本，仅启动服务器
+  --v1                      使用 v1 模式 (webpack 自构建，已废弃)
+
+v2 模式 (默认):
+  自动检测项目的 dev 脚本，调用 npm run dev 构建产物
+  监听 dist/dev/ 目录变化，通过 web-runtime 加载 bundle
+  支持热更新 (SSE)
+
+v1 模式 (--v1):
+  使用内置 webpack 配置自行构建项目 (已废弃)
 
 Examples:
-  qt-web-cli
-  qt-web-cli --port 8080
-  qt-web-cli --config ./my.webpack.js
-  qt-web-cli --watch
-  qt-web-cli -v
-  qt-web-cli --info
-
-特点:
-  - 自动检测项目入口 (main-native.ts/js, main.ts/js)
-  - 零配置启动 web 开发服务器
-  - 支持文件变化自动重启 (--watch)
+  qt-web-cli                      # v2 模式，自动构建+启动
+  qt-web-cli --no-auto-build      # v2 模式，仅启动服务器（需先手动 npm run dev）
+  qt-web-cli --dev-script build   # 使用 build 脚本替代 dev
+  qt-web-cli --port 8080          # 指定端口
+  qt-web-cli --v1                 # 使用 v1 模式
   `)
   process.exit(0)
 }
 
+// ============================================================================
+// 主入口
+// ============================================================================
+
 async function main() {
-  // 如果启用了 watch 模式，使用 watcher 脚本
-  if (args.watch) {
-    const { spawn } = require('child_process')
-    const watcherPath = path.join(__dirname, 'qt-web-cli-watch.js')
-    const watcherArgs = process.argv.slice(2).filter((arg) => arg !== '--watch' && arg !== '-w')
-
-    const watcher = spawn('node', [watcherPath, ...watcherArgs], {
-      cwd: process.cwd(),
-      stdio: 'inherit',
-      env: process.env,
-    })
+  // 强制使用 v1 模式
+  if (args.v1) {
+    signale.warn('v1 模式已废弃，建议迁移到 v2 模式')
+    return runV1()
+  }
+
+  signale.pending('正在启动 QuickTVUI Web CLI v2 ...')
+
+  // 查找项目根目录
+  const projectRoot = findProjectRoot()
+  if (!projectRoot) {
+    signale.error('无法找到项目根目录')
+    process.exit(1)
+  }
+
+  signale.info(`项目根目录: ${projectRoot}`)
+
+  // 读取 package.json
+  let pkg = {}
+  try {
+    pkg = require(path.join(projectRoot, 'package.json'))
+  } catch (e) {}
+
+  // 检测是否支持 v2 模式
+  const devScript = detectDevScript(pkg, args.devScript)
+  const distDir = args.distDir || 'dist/dev'
+  const distFullPath = path.join(projectRoot, distDir)
+
+  if (!devScript && !fs.existsSync(distFullPath)) {
+    signale.warn('项目未配置 dev 脚本且 dist/dev 目录不存在，回退到 v1 模式')
+    return runV1()
+  }
+
+  // ============================================================================
+  // v2 模式
+  // ============================================================================
+
+  const DevBuildManager = require('../lib/DevBuildManager')
+  const BundleWatcher = require('../lib/BundleWatcher')
+  const DevServer = require('../lib/DevServer')
+  const HotReloader = require('../lib/HotReloader')
+
+  // 初始化各模块
+  const hotReloader = new HotReloader()
+  const bundleWatcher = new BundleWatcher(projectRoot, {
+    onChange: (event) => {
+      if (event.isBundle) {
+        // 通知浏览器刷新
+        hotReloader.notifyBundleUpdate({
+          file: event.file,
+          bundleEntry: event.bundleEntry,
+          bundleUrlPath: event.bundleUrlPath,
+        })
+      }
+    },
+  })
+
+  const devServer = new DevServer(projectRoot, {
+    port: args.port,
+    hotReloader,
+    bundleUrlPath: `/dist/dev/index.bundle`,
+  })
+
+  // 记录是否已打开浏览器（避免重复打开）
+  let browserOpened = false
+
+  const devBuild = new DevBuildManager(projectRoot, {
+    pkg,
+    devScript: args.devScript || 'dev',
+    onOutput: (text, stream) => {
+      // 将构建输出透传到控制台
+      if (stream === 'stdout') {
+        process.stdout.write(text)
+      } else {
+        process.stderr.write(text)
+      }
+    },
+    onReady: () => {
+      // 构建完成后，通知浏览器
+      hotReloader.notifyBuildStatus('ready', '构建完成')
+
+      // 更新 bundle URL
+      const bundleUrlPath = bundleWatcher.getBundleUrlPath()
+      if (bundleUrlPath) {
+        devServer.setBundleUrlPath(bundleUrlPath)
+      }
 
-    watcher.on('exit', (code) => {
-      process.exit(code || 0)
+      // 构建就绪后打开浏览器（只打开一次）
+      if (args.open && !browserOpened) {
+        browserOpened = true
+        const urlPath = bundleUrlPath || '/dist/dev/index.bundle'
+        const url = `http://localhost:${args.port}?bundle=${urlPath}`
+        openBrowser(url)
+      }
+
+      // 清除 HotReloader 中缓存的 bundle-update 事件
+      // 防止 SSE 重连后再次触发页面刷新导致无限循环
+      hotReloader.clearLastEvent()
+    },
+  })
+
+  // 检测已有构建产物
+  const existingBundle = devBuild.detectExistingBundle()
+  const shouldAutoBuild = !args.noAutoBuild && devScript
+
+  if (existingBundle) {
+    signale.success(
+      `检测到已有构建产物: ${distDir}/${existingBundle.entry} (${formatSize(existingBundle.size)})`
+    )
+
+    // 更新 bundle URL
+    devServer.setBundleUrlPath(`/dist/dev/${existingBundle.entry}`)
+  } else if (shouldAutoBuild) {
+    signale.info('未检测到构建产物，将自动启动 dev 构建')
+  } else {
+    signale.warn('未检测到构建产物，且未启用自动构建')
+    signale.warn('请先手动运行: npm run dev')
+  }
+
+  // 启动文件监听
+  bundleWatcher.start()
+
+  // ============================================================================
+  // 端口预检测
+  // ============================================================================
+  const net = require('net')
+
+  // 检测 web-cli 端口（39001）
+  const webCliPortAvailable = await checkPortAvailable(net, args.port)
+  if (!webCliPortAvailable) {
+    const processInfo = getPortProcessInfo(args.port)
+    const pidInfo = processInfo
+      ? processInfo.name
+        ? `PID: ${processInfo.pid} (${processInfo.name})`
+        : `PID: ${processInfo.pid}`
+      : '无法获取进程信息'
+    signale.warn(`Web CLI 端口 ${args.port} 已被占用: ${pidInfo}`)
+
+    const killed = await promptKillPort(args.port, processInfo)
+    if (!killed) {
+      signale.error(`端口 ${args.port} 已被占用，请使用 --port 指定其他端口`)
+      process.exit(1)
+    }
+  }
+
+  // 检测 debug-server 端口（38989）— 仅在使用 qt-dev 的项目中提示
+  // Vue3 项目使用 qt-dev，会启动 debug-server 监听 38989
+  // Vue2 项目使用纯 webpack，不涉及 38989 端口
+  const isQtDevProject =
+    devScript &&
+    (devScript.script.includes('qt-dev') ||
+      devScript.script.includes('es3-debug-server') ||
+      devScript.script.includes('hippy-debug-server'))
+  if (isQtDevProject) {
+    const debugServerPort = 38989
+    const debugPortAvailable = await checkPortAvailable(net, debugServerPort)
+    if (!debugPortAvailable) {
+      const processInfo = getPortProcessInfo(debugServerPort)
+      const pidInfo = processInfo
+        ? processInfo.name
+          ? `PID: ${processInfo.pid} (${processInfo.name})`
+          : `PID: ${processInfo.pid}`
+        : '无法获取进程信息'
+      signale.warn(`Debug Server 端口 ${debugServerPort} 已被占用: ${pidInfo}`)
+      signale.warn('如遇 dev 启动失败，请先关闭占用该端口的进程')
+    }
+  }
+
+  // 先启动开发服务器（确保浏览器打开时服务器已就绪）
+  try {
+    await devServer.start()
+    signale.success(`开发服务器已启动: http://localhost:${args.port}`)
+
+    // 构建状态通知
+    hotReloader.notifyBuildStatus(
+      existingBundle ? 'ready' : 'building',
+      existingBundle ? 'Bundle 已就绪' : '等待构建完成...'
+    )
+
+    // 仅在不需要自动构建且已有产物时立即打开浏览器
+    // 否则等 dev 构建完成后再打开（在 onReady 回调中）
+    if (args.open && existingBundle && !shouldAutoBuild && !browserOpened) {
+      browserOpened = true
+      const bundleUrlPath = bundleWatcher.getBundleUrlPath() || '/dist/dev/index.bundle'
+      const url = `http://localhost:${args.port}?bundle=${bundleUrlPath}`
+      openBrowser(url)
+    }
+  } catch (err) {
+    signale.error('开发服务器启动失败:', err.message)
+    process.exit(1)
+  }
+
+  // 启动 dev 构建（服务器已就绪，构建完成后在 onReady 回调中打开浏览器）
+  if (shouldAutoBuild && !existingBundle) {
+    try {
+      await devBuild.start()
+    } catch (err) {
+      signale.error('dev 构建启动失败:', err.message)
+      signale.warn('你可以手动运行 npm run dev，然后使用 --no-auto-build 重新启动 CLI')
+    }
+  } else if (shouldAutoBuild && existingBundle) {
+    // 已有构建产物，在后台启动 dev 构建
+    // 等待 webpack 编译完成后再打开浏览器（而不是立即打开）
+    signale.info('已有构建产物，后台启动 dev 构建用于热更新...')
+    devBuild.start().catch((err) => {
+      signale.warn('后台 dev 构建启动失败:', err.message)
     })
+  }
 
-    return
+  // 优雅退出
+  const cleanup = () => {
+    signale.info('正在停止...')
+    devBuild.stop()
+    bundleWatcher.stop()
+    devServer.stop()
+    signale.success('已停止')
+    process.exit(0)
   }
 
-  signale.pending('正在启动 QuickTVUI Web 开发服务器...')
+  process.on('SIGINT', cleanup)
+  process.on('SIGTERM', cleanup)
+}
+
+// ============================================================================
+// v1 模式 (webpack 自构建，已废弃)
+// ============================================================================
+
+function runV1() {
+  signale.pending('正在启动 QuickTVUI Web CLI v1 (webpack 模式)...')
 
   // 查找项目根目录
   const projectRoot = findProjectRoot()
@@ -141,7 +364,6 @@ async function main() {
   let mainEntry
   let entryType
 
-  // 入口候选列表
   const entryCandidates = [
     { name: 'src/main-native.ts', path: './src/main-native.ts', type: 'package' },
     { name: 'src/main-native.js', path: './src/main-native.js', type: 'package' },
@@ -162,10 +384,7 @@ async function main() {
   }
 
   if (!mainEntry) {
-    signale.error('无法找到有效的入口文件，请检查以下路径:')
-    signale.error('  - src/main-native.ts 或 src/main-native.js')
-    signale.error('  - src/main.ts 或 src/main.js')
-    signale.error('  - package.json 中的 main 字段')
+    signale.error('无法找到有效的入口文件')
     process.exit(1)
   }
 
@@ -194,17 +413,15 @@ async function main() {
 }
 
 /**
- * 使用 webpack Node API 启动开发服务器
+ * 使用 webpack Node API 启动开发服务器 (v1)
  */
 function startDevServer(configPath, port, shouldOpen, userConfigPath) {
   const webpack = require('webpack')
   const WebpackDevServer = require('webpack-dev-server')
   const { merge } = require('webpack-merge')
 
-  // 加载内置配置
   let config = require(configPath)
 
-  // 如果用户指定了自定义配置，进行合并
   if (userConfigPath) {
     if (!fs.existsSync(userConfigPath)) {
       signale.error(`自定义配置文件不存在: ${userConfigPath}`)
@@ -230,8 +447,7 @@ function startDevServer(configPath, port, shouldOpen, userConfigPath) {
     signale.success(`开发服务器已启动: http://localhost:${port}`)
 
     if (shouldOpen) {
-      const url = `http://localhost:${port}`
-      openBrowser(url)
+      openBrowser(`http://localhost:${port}`)
     }
   })
 
@@ -243,45 +459,45 @@ function startDevServer(configPath, port, shouldOpen, userConfigPath) {
   })
 }
 
-/**
- * 等待服务器就绪
- */
-function waitForServer(url, timeout = 30000) {
-  const http = require('http')
-  const startTime = Date.now()
-
-  return new Promise((resolve, reject) => {
-    function check() {
-      if (Date.now() - startTime > timeout) {
-        reject(new Error('等待服务器超时'))
-        return
-      }
+// ============================================================================
+// 工具函数
+// ============================================================================
 
-      const req = http.get(url, (res) => {
-        if (res.statusCode === 200 || res.statusCode === 304) {
-          resolve()
-        } else {
-          setTimeout(check, 500)
-        }
-      })
-
-      req.on('error', () => {
-        setTimeout(check, 500)
-      })
+function findProjectRoot(startDir = process.cwd()) {
+  let currentDir = startDir
+  while (currentDir !== path.dirname(currentDir)) {
+    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
+      return currentDir
+    }
+    currentDir = path.dirname(currentDir)
+  }
+  return null
+}
 
-      req.setTimeout(1000, () => {
-        req.destroy()
-        setTimeout(check, 500)
-      })
+function detectDevScript(pkg, scriptName) {
+  const scripts = pkg.scripts || {}
+  const candidates = [scriptName, 'dev', 'dev:android', 'build:dev']
+  for (const name of candidates) {
+    if (name && scripts[name]) {
+      return { name, script: scripts[name] }
     }
+  }
+  return null
+}
 
-    check()
-  })
+function checkOpenSSLVersion(version) {
+  if (!version) return false
+  const match = /^(\d+)\.(\d+)\.(\d+)/.exec(version)
+  if (!match) return false
+  return parseInt(match[1], 10) >= 3
+}
+
+function formatSize(bytes) {
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
 }
 
-/**
- * 打开浏览器
- */
 function openBrowser(url) {
   const platform = process.platform
   const command =
@@ -294,30 +510,119 @@ function openBrowser(url) {
 
   if (result.code === 0) {
     signale.success('已打开浏览器')
-    return
+  } else {
+    signale.warn(`自动打开浏览器失败，请手动访问: ${url}`)
   }
+}
 
-  signale.warn(`自动打开浏览器失败，请手动访问: ${url}`)
+/**
+ * 检测端口是否可用（通过尝试绑定）
+ */
+function checkPortAvailable(net, port) {
+  return new Promise((resolve) => {
+    const tester = net.createServer()
+    tester.once('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        resolve(false)
+      } else {
+        resolve(false)
+      }
+    })
+    tester.once('listening', () => {
+      tester.close()
+      resolve(true)
+    })
+    tester.listen(port)
+  })
 }
 
-function findProjectRoot(startDir = process.cwd()) {
-  let currentDir = startDir
-  while (currentDir !== path.dirname(currentDir)) {
-    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
-      return currentDir
+/**
+ * 获取占用端口的进程信息
+ */
+function getPortProcessInfo(port) {
+  try {
+    const { execSync } = require('child_process')
+    const isWindows = process.platform === 'win32'
+    let cmd
+    if (isWindows) {
+      cmd = `netstat -ano | findstr :${port} | findstr LISTENING`
+    } else {
+      cmd = `lsof -i :${port} -P -n -t 2>/dev/null`
     }
-    currentDir = path.dirname(currentDir)
+    const result = execSync(cmd, { encoding: 'utf-8', timeout: 5000 }).trim()
+    if (!result) return null
+
+    if (isWindows) {
+      const match = result.match(/LISTENING\s+(\d+)/)
+      return match ? { pid: match[1], name: '' } : null
+    } else {
+      const pid = result.split('\n')[0].trim()
+      if (!pid) return null
+      let name = ''
+      try {
+        name = execSync(`ps -p ${pid} -o comm= 2>/dev/null`, { encoding: 'utf-8' }).trim()
+      } catch (e) {
+        /* ignore */
+      }
+      return { pid, name: name || 'unknown' }
+    }
+  } catch (e) {
+    return null
   }
-  return null
 }
 
-function checkOpenSSLVersion(version) {
-  if (!version) return false
-  const match = /^(\d+)\.(\d+)\.(\d+)/.exec(version)
-  if (!match) return false
-  return parseInt(match[1], 10) >= 3
+/**
+ * 提示用户是否杀掉占用端口的进程
+ */
+function promptKillPort(port, processInfo) {
+  return new Promise((resolve) => {
+    const readline = require('readline')
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    })
+
+    const timeout = setTimeout(() => {
+      rl.close()
+      resolve(false)
+    }, 30000)
+
+    rl.question(`  是否杀掉该进程并继续? [y/N] `, (answer) => {
+      clearTimeout(timeout)
+      rl.close()
+      const confirmed = (answer || '').trim().toLowerCase() === 'y'
+
+      if (confirmed) {
+        if (!processInfo || !processInfo.pid) {
+          signale.error('无法获取占用端口的进程 PID，请手动查找并关闭')
+          resolve(false)
+          return
+        }
+        try {
+          const { execSync } = require('child_process')
+          const isWindows = process.platform === 'win32'
+          if (isWindows) {
+            execSync(`taskkill /PID ${processInfo.pid} /F`, { encoding: 'utf-8' })
+          } else {
+            execSync(`kill -9 ${processInfo.pid}`, { encoding: 'utf-8' })
+          }
+          signale.success(`已杀掉进程 ${processInfo.pid}`)
+          setTimeout(() => resolve(true), 500)
+        } catch (e) {
+          signale.error(`杀掉进程失败: ${e.message}`)
+          resolve(false)
+        }
+      } else {
+        resolve(false)
+      }
+    })
+  })
 }
 
+// ============================================================================
+// 启动
+// ============================================================================
+
 main().catch((err) => {
   signale.error('启动失败:', err)
   process.exit(1)