阅读 792

Hippy-React脚手架开发

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"
  }
复制代码

启动项目

指向安装命令之后,项目创建完毕。

下面是通过指令启动服务

  1. 启动打包

    npm run hippy:dev
    复制代码
  2. 启动后台服务

    npm run hippy:debug
    复制代码
  3. 启动ios模拟器

    npm run hippy:ios
    复制代码

至此,已经完成了Hippy项目的启动了,可以开启你的Hippy探索之路

下一步规划

  1. Hippy-Vue脚手架开发
  2. 支持android模拟器

有兴趣的同学可以一起来哦

文章分类
前端
文章标签