React-umi-antd-unitywebgl - Go语言中文社区

React-umi-antd-unitywebgl


1.umi创建工程 https://umijs.org/zh-CN/docs/getting-started;止于启动项目yarn start;不添加layout:{}

2.添加antd,react-unity-webgl (均为最新版本);package.json 

{
  "private": true,
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "dependencies": {
    "@ant-design/pro-layout": "^6.5.0",
    "@umijs/preset-react": "1.x",
    "antd": "4.13.0",
    "react-unity-webgl": "^8.1.1",
    "umi": "^3.3.9"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@umijs/test": "^3.3.9",
    "lint-staged": "^10.0.7",
    "prettier": "^2.2.0",
    "react": "17.x",
    "react-dom": "17.x",
    "typescript": "^4.1.2",
    "yorkie": "^2.0.0"
  }
}

3.创建public文件夹,拷贝unity webgl build输出包(只保留build内文件);修改index.tsx

import styles from './index.less';
import {Button} from 'antd/es';
import Unity,{UnityContext} from 'react-unity-webgl';

const unityContext = new UnityContext({
  loaderUrl: "build/build.loader.js",
  dataUrl: "build/build.data",
  frameworkUrl: "build/build.framework.js",
  codeUrl: "build/build.wasm",
});

export default function IndexPage() {
  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <Button>Hit me</Button>
      <Unity width="100%" height="100%" unityContext={unityContext} />
    </div>
  );
}

4. yarn start 正常运行;暂时比较顺利;(dva基本不跟新,使用dva引入antd,编译失败无法运行<_<)!

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/yaoyutian/article/details/114273237
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-06-12 11:20:08
  • 阅读 ( 1793 )
  • 分类:

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢