转 Web

hippy-react 通过 @hippy/react-web 库来将 Hippy 应用转译、运行在浏览器中。

@hippy/react-web 2.14.0 开始支持较为完整的转 Web 能力

安装运行时依赖

请使用 npm i 安装以下 npm 包，保证转 Web 运行时正常。

包名	说明
react	react 版本 >= v16.8.0
hippy-react-web	hippy-react 转 Web 适配器
react-dom	react 的 Web 的渲染器
animated-scroll-to	scroll 的时候添加动画
swiper	ViewPager 需要
@hippy/rmc-list-view	ListView 需要
@hippy/rmc-pull-to-refresh	ListView PullHeader 需要

编译时依赖

以官方提供的范例工程范例工程为例，需要使用 npm i -D 准备好以下依赖，当然开发者可以根据需要自行选择：

包名	说明
css-loader	Webpack 插件 - 内联样式转 CSS
html-webpack-plugin	Webpack 插件 - 生成首页 html
style-loader	Webpack 插件 - 内联样式
webpack-dev-server	Webpack 网页端调试服务

终端开发调试用编译配置

该配置展示了将 Hippy 运行于 Web 的最小化配置，并未包含分包等内容，开发者可以自行扩展。

和 hippy-react 的主要区别在于做了一个 hippy-react 到 hippy-react-web 的 alias，使之可以不用修改代码直接运行。

配置文件	说明
hippy-webpack.web.js	调试用配置

入口文件

hippy-react-web 和 hippy-react 的启动参数一致，可以共享同一个 main.js 入口文件。

NPM 脚本

hippy-react-web 使用了 webpack-dev-server 来启动调试，可以支持全部的 Web 调试特性，而同时使用同一份配置文件换而使用 webpack 进行打包。

这里的命令其实参考了 vue-cli 生成的 Vue 项目，通过 serve 启动调试服务，通过 build 编译出 JS 包。

json

  "scripts": {
    "serve": "webpack-dev-server --config ./scripts/hippy-webpack.web.js",
    "build": "webpack --config ./scripts/hippy-webpack.web.js",
  }

启动调试

执行 npm run serve 后就会启动 Web 调试，但要注意默认生成的 HTML 文件名是从 package.json 的 name 字段定义，而不是默认的 index.html，所以对于官方范例，需要使用 http://localhost:8080/hippy-react-demo.html 来访问调试用页面。

WebRenderer 方案

Hippy 全新 WebRenderer 方案，增加基于公共通信协议的转换层，业务开发者可以使用同一套 Hippy 语法开发的业务代码，映射成 JS 实现的组件和模块，上层无论使用 React，Vue 或者其他第三方框架，都可以实现兼容，可参考。