@quicktvui/web-cli 1.0.0-beta.25 → 1.0.0-beta.27

package/bin/qt-web-cli.js

@@ -164,40 +164,54 @@ async function main() {
 
   // 检测 OpenSSL 版本
   const needLegacyProvider = checkOpenSSLVersion(process.versions.openssl)
-  let nodeOptions = ''
   if (needLegacyProvider) {
-    nodeOptions = '--openssl-legacy-provider'
     signale.warn(`检测到 OpenSSL ${process.versions.openssl}，已添加 --openssl-legacy-provider`)
+    process.env.NODE_OPTIONS = '--openssl-legacy-provider'
   }
 
-  // 构建 webpack 命令 - 使用 web-cli 自带的 webpack-cli
-  const webpackCliPath = require.resolve('webpack-cli/bin/cli.js', {
-    paths: [path.resolve(__dirname, '..')],
-  })
-  const webpackArgs = [webpackCliPath, 'serve', `--config "${webpackConfigPath}"`, `--port ${args.port}`, '--color']
+  signale.pending(`启动开发服务器: http://localhost:${args.port}`)
 
-  const envPrefix = nodeOptions ? `NODE_OPTIONS="${nodeOptions}" ` : ''
-  const webpackCmd = `${envPrefix}node ${webpackArgs.join(' ')}`
+  // 使用 webpack Node API 启动开发服务器
+  startDevServer(webpackConfigPath, args.port, args.open)
+}
 
-  signale.pending(`执行: webpack serve --port ${args.port}`)
+/**
+ * 使用 webpack Node API 启动开发服务器
+ */
+function startDevServer(configPath, port, shouldOpen) {
+  const webpack = require('webpack')
+  const WebpackDevServer = require('webpack-dev-server')
+  const config = require(configPath)
+
+  // 确保 devServer 配置正确
+  config.devServer = config.devServer || {}
+  config.devServer.port = port
+  config.devServer.open = false // 我们自己控制浏览器打开
+
+  const compiler = webpack(config)
+  const server = new WebpackDevServer(config.devServer, compiler)
+
+  server.startCallback((err) => {
+    if (err) {
+      signale.error('启动开发服务器失败:', err.message)
+      process.exit(1)
+    }
+    signale.success(`开发服务器已启动: http://localhost:${port}`)
 
-  // 如果需要打开浏览器，等待服务器就绪后打开
-  if (args.open) {
-    const url = `http://localhost:${args.port}`
-    waitForServer(url, 30000)
-      .then(() => {
-        openOrRefreshBrowser(url)
-      })
-      .catch((err) => {
-        signale.warn(`自动打开浏览器失败: ${err.message}`)
-      })
-  }
+    // 打开浏览器
+    if (shouldOpen) {
+      const url = `http://localhost:${port}`
+      openOrRefreshBrowser(url)
+    }
+  })
 
-  const result = exec(webpackCmd, { stdio: 'inherit' })
-  if (result.code !== 0) {
-    signale.error('启动开发服务器失败')
-    process.exit(1)
-  }
+  // 处理退出信号
+  process.on('SIGINT', () => {
+    server.stopCallback(() => {
+      signale.info('开发服务器已停止')
+      process.exit(0)
+    })
+  })
 }
 
 /**

package/lib/webpack.config.js

@@ -100,6 +100,10 @@ function detectCSSLoader() {
 
 const cssLoader = detectCSSLoader()
 
+// 获取 web-cli 目录下的 loader 路径
+const cliDir = path.resolve(__dirname, '..')
+const resolveLoader = (loaderName) => require.resolve(loaderName, { paths: [cliDir] })
+
 // 入口文件：只加载 entry-package.js，主入口通过动态 import 加载
 const entryPackageFile = path.resolve(__dirname, 'entry-package.js')
 const entryFiles = ['regenerator-runtime/runtime', entryPackageFile]
@@ -196,7 +200,7 @@ module.exports = {
             loader: 'vue-loader',
             options: { compilerOptions: { whitespace: 'condense' } },
           },
-          'scope-loader',
+          require.resolve('scope-loader', { paths: [path.resolve(__dirname, '..')] }),
         ],
       },
       // TypeScript 文件

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicktvui/web-cli",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.27",
   "description": "CLI tool for QuickTVUI web development - zero configuration",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",