hybrid开发套件的工程化实现
功能概述
过去我在 hybrid 混合 webapp 领域做了多年，积累了不少的函数库、工具库、代码片段、常规解决方案、vue 组件库等。
为了能让零散的知识形成一套统一方法论，便于有同类需求的工程师们借鉴，如今我将他们封装成特定的“脚手架和基础能力底座”、”组件和指令库“、”代码片段“、”套件文档“。
先说说大概做了什么
首先脚手架层面：
- vite+vue3 套装
- vite 修改：dev 服务器增加–host 参数，方便局域网内直接手机访问电脑 IP 调试。
脚手架实现
参考 create-vite
脚手架文档和组件库文档
文档-使用文档
局域网调试
jsbridge 调用
移动端适配的 css 编写
按路由配置皮肤模式
按路由配置沉浸式
组件库和指令库
cicd 和部署
history 模式，需要 nginx 做好配合。
chunk 稳定性
hybrid 业务不同于完整的 webapp 项目，通常并不是一个单独的完整功能的 webapp 植入到 app 中。而是分散的各种不同的 h5（例如活动页、支付页、提现页、创作者中心、用户任务中心、榜单）等。
如果直接通过 vue 全家桶创建项目，会造成”修改单个页面，会连同其他非本次需求的页面一起被构建“，极易产生风险。因此这种场景下，通常需要采用”多项目“ 或 ”多页面 entry 入口“的方案。
但假如我们采用 history 路由模式，多入口和多项目会带来新的麻烦：我不得不在服务器上针对不同入口和项目分别去配置各自的 try_file nginx 配置，从而让 history 模式下始终访问到 index.html。
那是否有更轻量一丢丢的方案，即我依然采用单个入口，但是每次迭代 A 路由时候不要影响 B 路由的构建结果。这里，我们可以研究下 vite 的分包稳定性。
文档-细节原理
客户端
解决调试 webview 入口问题
解决局域网调试问题
1、需要解决 http 访问问题
2、需要解决 charlse 或 wistle 抓包证书信任问题
解决 jsbridge 通信问题
前端
解决局域网 IP 监听调试问题
解决 jsbridge 调用问题
路由皮肤和沉浸式管理
1、为增加路由可维护性，单独抽离 routes 配置到 routes.ts 文件中。
import routes from ‘./routes’
2、为实现按路由自定义皮肤和沉浸式能力，通过钩子给路由增加额外 meta 配置能力。