转 Web

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

该项目仍在开发中,有不完善的地方,欢迎 PR。

安装运行时依赖

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

包名说明
bezier-easinghippy-react 动画在 Web 运行时需要
hippy-react-webhippy-react 转 Web 适配器
react-domreact 的 Web 的渲染器

编译时依赖

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

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

终端开发调试用编译配置

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

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

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

入口文件

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

npm script

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

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

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

启动调试

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