预览服务配置反向代理 (#143)

* server配置代理，插件给预览页传调试js url

* 格式修正

* 增加备注

* ide新建模板卡片传入参数控制是否每次编译编译更新用户自定义变量

* 格式调整

* 还原scriptNotFound判断

---------

Co-authored-by: yucongshuang <v-yucongshuang@oppo.com>

Author: oneyouzi

packages/hap-server/package.json

@@ -44,6 +44,7 @@
     "qr-image": "^3.2.0",
     "qrcode-terminal": "^0.12.0",
     "request": "^2.88.2",
-    "resolve": "^1.22.2"
+    "resolve": "^1.22.2",
+    "koa-proxies": "^0.12.4"
   }
 }

packages/hap-server/src/preview/create-router.js

@@ -228,6 +228,7 @@ export default async function createRouter(previewTarget) {
         type,
         script,
         scriptNotFound: !scriptExists(script),
+        devtoolUrl: browerOptions.options.devtoolUrl || '',
         webJsUrl: genWebJsUrl(browerOptions.options.version || ctx.conf.options.webVersion), // 更改预览版本号修改为同媒介查询一样的传参方式，同时兼容之前的方式
         language: currentLanguage,
         mediaQueryParams: JSON.stringify(mediaQueryParams) // 传给页面的媒介查询参数

packages/hap-server/src/preview/views/page.html

@@ -93,6 +93,11 @@
         document.write('<script src="/preview-static/web.js">\x3C/script>')
       }
     </script>
+    <script type="text/javascript">
+      if (`{{devtoolUrl}}`) {
+        document.write('<script src="{{devtoolUrl}}">\x3C/script>')
+      }
+    </script>
     <script type="text/javascript">
       var base = '/preview'
       var type = '{{ type }}'
@@ -102,7 +107,8 @@
         var routeName = '{{ routeName }}'
         Hap.init({
           base,
-          type
+          type,
+          idePlatform: `{{devtoolUrl}}` ? 'extensionOnline' : undefined
         })
       })()
     </script>

packages/hap-server/src/server.js

@@ -16,6 +16,7 @@ import {
 } from '@hap-toolkit/shared-utils'
 import { browerOptions } from './config'
 const moduler = [require('@hap-toolkit/debugger')]
+const proxies = require('koa-proxies')
 let server = null
 export async function launch(conf) {
   return new Promise(async (resolve) => {
@@ -25,6 +26,20 @@ export async function launch(conf) {
         moduler.push((await import('@hap-toolkit/packager')).router, require('./preview/index.js'))
       }
       const app = new Koa()
+      // 插件方式的预览页面是iframe，快应用开发ajax请求会受同源策略限制，需要做代理转发
+      app.use(async (ctx, next) => {
+        if (ctx.request.url.startsWith('/api/proxy')) {
+          const target = ctx.request.url.split('target=')[1] // 从查询参数获取实际请求的目标地址
+          //  const apiReg = new RegExp(`^${api}/`);
+          return proxies('/api/proxy', {
+            target: target,
+            changeOrigin: true,
+            logs: true,
+            rewrite: (path) => path.replace(/^\/api\/proxy/, '')
+          })(ctx, next)
+        }
+        return next()
+      })
       let serverPort = globalConfig.server.port
       // 如果设置的端口被占用，则自动递增获取可用端口
       serverPort = await portfinder.getPortPromise({

packages/hap-toolkit/src/commands/compile.js

@@ -41,6 +41,7 @@ showVersion()
  * @param {Function} [options.onerror] - 错误回调函数
  * @param {String} [options.buildPreviewRpkOptions] - 预览包保存路径，由IDE传入
  * @param {Object} [options.compileOptions] - 编译参数，由IDE传入
+ * @param {Object} [options.isUpdateDefine=undefined] - 执行compile是否更新webpack注入的变量,ide新建模板卡片会传入
  * @param {Object} [options.ideConfig] - cli，由 IDE 传入
  * @returns {Promise} - 返回成功与否的信息
  */

packages/hap-toolkit/src/gen-webpack-conf/helpers.js

@@ -25,7 +25,17 @@ export function getConfigPath(cwd) {
   } while (++index < configFileList.length)
   return configPath
 }
-
+/** ide新建模板执行编译获取用户配置的路径，变量可变，需要复制一份
+ * @param {String} cwd
+ */
+export function getNewTemplateConfigPath(cwd) {
+  const defaultConfig = 'quickapp.config.js'
+  const defaultConfigPath = path.join(cwd, defaultConfig)
+  const copyConfig = new Date().getTime() + '.js'
+  const copyConfigPath = path.join(cwd, copyConfig)
+  fs.copyFileSync(defaultConfigPath, copyConfigPath)
+  return copyConfigPath
+}
 /**
  * 清理 BUILD_DIR DIST_DIR
  */

packages/hap-toolkit/src/gen-webpack-conf/index.js

@@ -27,6 +27,7 @@ import { resolveEntries } from '../utils'
 import getDevtool from './get-devtool'
 import {
   getConfigPath,
+  getNewTemplateConfigPath,
   cleanup,
   checkBuiltinModules,
   setAdaptForV8Version,
@@ -64,6 +65,7 @@ const SPLIT_CHUNKS_SUPPORT_VERSION_FROM = 1080
  * @param {boolean} [launchOptions.optimizeStyleAppLevel=false] - 优化 app 样式等级
  * @param {boolean} [launchOptions.optimizeStylePageLevel=false] - 优化 app 样式等级
  * @param {boolean} [launchOptions.splitChunksMode=undefined] - 抽取公共JS
+ * @param {boolean} [launchOptions.isUpdateDefine=undefined] - 执行compile是否更新webpack注入的变量，ide新建模板卡片会传入
  * @param {Object} [options.compileOptions] - 编译参数，由IDE传入
  * @param {production|development} mode - webpack mode
  * @returns {WebpackConfiguration}
@@ -76,7 +78,9 @@ export default async function genWebpackConf(launchOptions, mode) {
   globalConfig.projectPath = path.resolve(globalConfig.projectPath)
   const cwd = globalConfig.projectPath
 
-  const hapConfigPath = getConfigPath(cwd)
+  const hapConfigPath = launchOptions.isUpdateDefine
+    ? getNewTemplateConfigPath(cwd)
+    : getConfigPath(cwd)
   // 用于接受quickapp.config.js 或者 hap.config.js中的配置
   let quickappConfig
   // 接受命令行
@@ -92,6 +96,10 @@ export default async function genWebpackConf(launchOptions, mode) {
       colorconsole.error(`加载webpack配置文件[${hapConfigPath}]出错：${err.message}`)
     }
   }
+  // 获取到更新后的用户配置文件后要删除复制配置文件
+  if (launchOptions.isUpdateDefine) {
+    fs.unlinkSync(hapConfigPath)
+  }
   // 接收ide命令行
   if (launchOptions.ideConfig && typeof launchOptions.ideConfig.cli === 'object') {
     launchOptions = Object.assign({}, launchOptions.ideConfig.cli, launchOptions)