3.9 KiB
Web Isomorphic
Hippy apps react translates and runs hippy applications in browsers through the @hippy/React apps web library.
After version 2.14.0, @hippy/react-web supports relatively complete adaptation to the Web.
Install Runtime Dependencies
Please use npm i to install the following npm package to ensure normal web runtime adaptation.
| Package name | Description |
|---|---|
| react | React version>= v16.8.0 |
| hippy-react-web | Web adapter for hippy-react |
| react-dom | react web renderer |
| animated-scroll-to | Add animation when scrolling |
| swiper | ViewPager requires |
| @hippy/rmc-list-view | ListView requires |
| rmc-pull-to-refresh | ListView PullHeader requires |
Compile Time Dependencies
Take the officially provided Example Project example project as an example, you need to use npm i -D to prepare the following dependencies. Of course, the developer You can choose according to your needs:
| Package name | Description |
|---|---|
| css-loader | Webpack plugin - Inline styles to CSS |
| html-webpack-plugin | Webpack plugin - Generate homepage html |
| style-loader | Webpack plugin - Inline styles |
| webpack-dev-server | Webpack webside debugging service |
Compiling Configuration For Native Development And Debugging
This configuration shows the minimum configuration for running Hippy on the web, and does not include subcontracting and other content, and developers can expand by themselves. The main difference with hippy-react is to make an alias from hippy-react to hippy-react-web, so that it can run directly without modifying the code.
| Configuration file | Description |
|---|---|
| hippy-webpack.web.js | Configuration for debugging |
Entry File
hippy-react-web and hippy-react have the same startup parameters and can share the same main.js entry file.
NPM Script
hippy-react-web uses webpack-dev-server to start debugging, which supports all web debugging features. At the same time, use the same configuration file and use webpack for packaging.
The command here actually refers to the Vue project generated by vue-cli, starts the debugging service through serve, and compiles the JavaScript package through build.
"scripts": {
"serve": "webpack-dev-server --config ./scripts/hippy-webpack.web.js",
"build": "webpack --config ./scripts/hippy-webpack.web.js",
}
Start Debugging
Web debugging will start after executing npm run serve, but note that the default generated HTML file name is defined from the name field of package.json, not the default index.html, so for the official example , you need to use http://localhost:8080/hippy-react-demo.html to access the debugging page.
WebRenderer Scheme
Hippy use WebRenderer scheme to add a conversion layer based on common communication protocols. Business developers can use the same set of Hippy syntax to map business code to components and modules implemented in JavaScript. Whether the upper layer uses React, Vue or other third-party frameworks, it can be compatible.