egret+react框架搭建

选用的游戏框架

egret
为什么选egret？因为目前看来比较成熟，社区活跃度也有。

react 基础框架如何引入egret

引入库

手动引入egret的库 放在了libs/modules/目录下，在index.html中引入

创建游戏

创建一个游戏需要有dom元素，如下代码中className为egret-player的DOM元素。

点击开始游戏，调用egret.runEgret的方法开始，这只是demo，在正常的游戏开发中，开始游戏的按钮和游戏页面经常不在一个页面里，所以这个部分的代码&逻辑按需求放到对应的地方。

import React from 'react'
import './index.scss'
import Main from '@/game/Main'

class Game extends React.Component {
  componentDidMount() {
    egret.registerClass(Main, 'Main')
    window['Main'] = Main
  }

  start = () => {
    egret.runEgret({ renderMode: 'webgl', audioType: 0 })
  }

  render() {
    return (
      

        
开始游戏
        

      
    )
  }
}

export default Game

注意的tips：
对应react网页应用来说，期望的是根据路由能够控制页面的生命周期，但是由于目前的用的egret不支持销毁重新开始，所以多次玩游戏的，只是把游戏页面隐藏再展示。也就是说以下代码的Game class需要被放到最外层的App.tsx里面直接渲染。然后在Game页根据当前的URL来判断是否展示游戏。

import React from 'react'
import { withRouter, RouteComponentProps } from 'react-router-dom'
import Main from '@/game/Main'
import { gameState } from './GameConfig'

import './index.scss'

class Game extends React.Component {
  componentDidMount() {
    egret.registerClass(Main, 'Main')
    // tslint:disable-next-line:no-string-literal
    window['Main'] = Main
  }

  render() {
    const { history } = this.props
    const isHidden = !history.location.pathname.includes('/game')
    if (isHidden && gameState.clearGame) {
      gameState.clearGame()
    }
    return (
      

手机浏览器兼容

使用rem

目前设计师是按照375*609设计的，所以使用rem的方式就如下：

px转rem

使用了 postcss-loader 和 postcss-plugin-px2rem
postcss.config.js的配置如下：

module.exports = {
  plugins: [
    require('autoprefixer')(),
    require('cssnano')(),
    require('postcss-plugin-px2rem')({
      remValue: 200,
      mediaQuery: true,
      propBlackList:['font-size'],
      exclude: /(node_module)/,
    }),
  ],
}

propBlackList:['font-size’]这是为了排除font-size被转成rem，但是后面考虑到适配不同的手机，font-size如果不转的话，会出现有些地方字体太小或太大，所以后来删掉了。

其他

• enzyme + jest测试框架
• husky加Git hook
• stylelint样式风格检查
• tslint代码风格检查
• babel + webpack编译打包（区分不同的环境）

基础的代码框架在egret-react-framework