12月20日,腾讯开源跨端框架 Hippy。详情请查看 《腾讯开源内部跨端框架 Hippy,打磨三年,日均 PV 过亿》
本文基于
create-react-app,搭建了一个快速开发Hippy项目的脚手架
注: 本文基于Mac上开发
Hippy-React
开发环境要求
- Mac
- xcode
- npm
创建项目
通过 react 官方脚手架 create-react-app 进行配置
使用 --template 参数,指定自定义 cra 模板: cra-template-hippy-react
npm init react-app [projectName] --template cra-template-hippy-react
本项目使用cra默认配置,所以如果使用npm run eject之后,需要手动在package.json中添加scripts
"scripts": {
"serve": "webpack-dev-server --config ./build/hippy-webpack.web.js",
"build": "webpack --config ./build/hippy-webpack.web.js",
"hippy:ios": "node ./build/run-ios.js",
"hippy:debug": "hippy-debug",
"hippy:dev": "webpack --config ./build/hippy-webpack.dev.js",
"hippy:vendor": "webpack --config ./build/hippy-webpack.ios-vendor.js --config ./build/hippy-webpack.android-vendor.js",
"hippy:build": "webpack --config ./build/hippy-webpack.ios.js --config ./build/hippy-webpack.android.js"
}
启动项目
指向安装命令之后,项目创建完毕。
下面是通过指令启动服务
-
启动打包
npm run hippy:dev -
启动后台服务
npm run hippy:debug -
启动ios模拟器
npm run hippy:ios
至此,已经完成了Hippy项目的启动了,可以开启你的Hippy探索之路
下一步规划
Hippy-Vue脚手架开发- 支持android模拟器
有兴趣的同学可以一起来哦