Skip to content

D
DuibaGameTemplate
Commit 3761cf03 authored by 邱旭's avatar 邱旭
Browse files
Options

测试模块

parent c7d992ae
Expand all Show whitespace changes
Inline Side-by-side
Showing with 859 additions and 42 deletions
.gitignore
View file @ 3761cf03
...@@ -3,3 +3,4 @@ dist/ ...@@ -3,3 +3,4 @@ dist/
build/ build/
released/resource/ released/resource/
yarn-error.log yarn-error.log
debug/
.idea/template.iml
View file @ 3761cf03
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<excludeFolder url="file://$MODULE_DIR$/released" /> <excludeFolder url="file://$MODULE_DIR$/released" />
<excludeFolder url="file://$MODULE_DIR$/build" /> <excludeFolder url="file://$MODULE_DIR$/build" />
<excludeFolder url="file://$MODULE_DIR$/test/build" /> <excludeFolder url="file://$MODULE_DIR$/test/build" />
<excludeFolder url="file://$MODULE_DIR$/debug" />
</content> </content>
<orderEntry type="inheritedJdk" /> <orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />
......
README.md
View file @ 3761cf03
...@@ -35,15 +35,6 @@ npm run psdSin ...@@ -35,15 +35,6 @@ npm run psdSin
npm run createModule RulePanel npm run createModule RulePanel
``` ```
### 资源配置刷新
有资源删除或增加时执行
会根据resource里的子级文件夹分组
文件夹名字用于各模块里的groupNames，用于按需资源加载
```shell script
npm run flushRes
```
### 本地开发 ### 本地开发
```shell script ```shell script
npm run dev npm run dev
...@@ -56,26 +47,15 @@ cnpm install pack_textures -g ...@@ -56,26 +47,15 @@ cnpm install pack_textures -g
#终端输入packTextures检查环境变量是否存在 #终端输入packTextures检查环境变量是否存在
``` ```
### 淘宝打包流程 ### 打包
```shell script ```shell script
#带资源打包，并生成./released/resource文件夹和./released/output.js文件 #带资源打包，并生成./released/resource文件夹和./released/output.js文件
npm run build npm run build
#只打包代码， #只打包代码，
npm run buildTS npm run buildTS
#脚本copyJs.js自行修改小程序output.js文件路径，嫌麻烦自行修改package.json里的build和buildTS，也可自行复制output.js
npm run copyJs
``` ```
### web打包流程
```shell script
#带资源打包，并生成./released/resource文件夹和./output.js文件及./released/index.html，可复制进皮肤
npm run buildWeb
#只打包代码，并生成./output.js文件及./released/index.html，会打印版本号，可直接更换皮肤的版本号
npm run buildWebTS
```
### 适配 ### 适配
./module/views/layers.ts可设置所有层级适配（弹框场景等等） ./module/views/layers.ts可设置所有层级适配（弹框场景等等）
......
index.html
View file @ 3761cf03
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
}) })
</script> </script>
<!-- 构建的js --> <!-- 构建的js -->
<script src="./build/output.js" crossorigin="anonymous"></script> <script src="./debug/output.js" crossorigin="anonymous"></script>
</body> </body>
</html> </html>
package.json
View file @ 3761cf03
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
"module": "released/output.module.js", "module": "released/output.module.js",
"scripts": { "scripts": {
"dev": "node rollup.dev.mjs -p 8080", "dev": "node rollup.dev.mjs -p 8080",
"test": "cd test && npm run testDev",
"build": "npm run handleRes && node scripts/mergeJson && node scripts/upload && npm run buildTS", "build": "npm run handleRes && node scripts/mergeJson && node scripts/upload && npm run buildTS",
"buildTS": "rollup -c rollup.prod.mjs && node scripts/uploadSingleJs", "buildTS": "rollup -c rollup.prod.mjs && node scripts/uploadSingleJs",
"handleLotS": "node scripts/handleLotS", "handleLotS": "node scripts/handleLotS",
......
released/index.html 0 → 100644
View file @ 3761cf03
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>new_game_template</title>
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="true"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<!-- polyfill -->
<script src="//yun.duiba.com.cn/db_games/libs0924/polyfill_220525.js" crossorigin="anonymous"></script>
<!-- 渲染引擎 -->
<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2044.min.js" crossorigin="anonymous"></script>
<!--<script src="libs/fyge.min.js" crossorigin="anonymous"></script>-->
<!-- svga解析库 -->
<script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script>
<!-- 放声音的 -->
<script src="//yun.duiba.com.cn/db_games/libs0924/howler.min.js" crossorigin="anonymous"></script>
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: #ffffff;
}
#__loading__ {
position: absolute;
left: 50%;
top: 50%;
margin-left: -45px;
color: #ffffff;
}
#cusEngine {
line-height: 0;
font-size: 0;
position: absolute;
}
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="__loading__">拼命加载中...</div>
<div id="cusEngine">
<canvas id="canvas"></canvas>
</div>
<!-- 帧率检测 -->
<!-- <script src="https://yun.duiba.com.cn/db_games/libs0126/stats.js"></script> -->
<script>
const app = {
checkMember: () => {
return false;
}
};
function getApp() {
return app;
}
// document.oncontextmenu = () => false;
</script>
<script>
var CFG = CFG || {};
CFG.projectId = 'pa525eacc';//线上直接写死
CFG.appID = '76177';//线上直接写死
//TODO我的奖品链接
window["recordUrl"] = "fe071865b.html";
window.addEventListener("load", function () {
//获取canvas
var canvas = document.getElementById("canvas");
canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
var main = new output.Game(canvas);
main.initWebEvent();
window.stage = main.stage
})
</script>
<!-- 构建的js -->
<script src="./debug/output.js" crossorigin="anonymous"></script>
</body>
</html>
released/output.js 0 → 100644
View file @ 3761cf03
This diff is collapsed.
released/output.js.map 0 → 100644
View file @ 3761cf03
This diff is collapsed.
released/output.module.js 0 → 100644
View file @ 3761cf03
This diff is collapsed.
released/output.module.js.map 0 → 100644
View file @ 3761cf03
This diff is collapsed.
rollup.dev.mjs
View file @ 3761cf03
...@@ -35,13 +35,13 @@ const options = { ...@@ -35,13 +35,13 @@ const options = {
cache: true, cache: true,
output: [ output: [
{ {
file: "build/output.js", file: "debug/output.js",
format: "umd", format: "umd",
name: "output", name: "output",
sourcemap: true, sourcemap: true,
}, },
{ {
file: 'build/output.module.js', file: 'debug/output.module.js',
format: 'esm', format: 'esm',
sourcemap: true, sourcemap: true,
} }
......
src/ResJson.ts
View file @ 3761cf03
This diff is collapsed.
test/index.html
View file @ 3761cf03
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<script src="./build/output.js" crossorigin="anonymous"></script> <script src="./debug/output.js" crossorigin="anonymous"></script>
</body> </body>
</html> </html>
test/rollup.test.mjs
View file @ 3761cf03
...@@ -9,7 +9,6 @@ import resolve from "@rollup/plugin-node-resolve"; ...@@ -9,7 +9,6 @@ import resolve from "@rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs"; import commonjs from "rollup-plugin-commonjs";
import livereload from "rollup-plugin-livereload"; import livereload from "rollup-plugin-livereload";
import progress from "rollup-plugin-progress"; import progress from "rollup-plugin-progress";
import serve from "rollup-plugin-serve";
import babel from "@rollup/plugin-babel"; import babel from "@rollup/plugin-babel";
import peerDepsExternal from "rollup-plugin-peer-deps-external"; import peerDepsExternal from "rollup-plugin-peer-deps-external";
import styles from "rollup-plugin-styles"; import styles from "rollup-plugin-styles";
...@@ -18,7 +17,7 @@ export default { ...@@ -18,7 +17,7 @@ export default {
input: "src/app.jsx", input: "src/app.jsx",
cache: true, cache: true,
output: { output: {
file: "build/output.js", file: "debug/output.js",
format: "umd", format: "umd",
sourcemap: true, sourcemap: true,
}, },
......
test/src/GamePage/GamePage.jsx
View file @ 3761cf03
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Game } from "../../../build/output.module"; import { Game } from "../../../debug/output.module";
import './GamePage.less'; import './GamePage.less';
......
开发模版使用文档.md 0 → 100644
View file @ 3761cf03
# 开发模版使用文档
### 文件目录
└── template \
├── config \
├── debug 不要管它 \
├── lotties 存放lottie文件 \
├── mock mock文件夹 \
├── module \
├── node_modules \
├── released 发布目录 \
├── resource 资源目录 \
├── scripts 脚本目录 \
│
├── test 测试目录 \
│ ├── debug 不要管它 \
│ ├── src 代码目录 \
│ ├── index.html 代码目录 \
│ └── rollup.test.mjs \
│
├── src 代码目录 \
│ ├── index.ts 主要导出 \
│ ├── Game.ts
│ ├── ResJson.ts 自动生成 \
│ └── SkinJson.ts 自动生成 \
│
├── .gitignore \
├── index.html html模版 \
├── project.json cdn配置 \
├── README.md \
├── rollup.dev.mjs \
├── rollup.prod.mjs \
└── 开发模版使用文档.md \
## 启动项目
`npm run dev`
访问 [http://localhost:8080/](http://localhost:8080/)
## 启动测试
`cd test && npm run testDev`
访问 [http://localhost:8080/test/index.html](http://localhost:8080/test/index.html)
## 打包
`npm run build`
等待进程结束，在`released`里会出现`index.html`、`output.js`、`output.module.js`
`index.html`可以直接作为web皮肤
`output.js`为umd模块，可在html中直接使用
`output.module.js`为esm模块，可在react、vue等工程里import使用
比如：
```jsx
import React, { Component } from 'react';
import { Game } from "./output.module";
import './GamePage.less';
export default class GamePage extends Component {
div = null;
game = null;
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
const canvas = document.createElement("canvas");
canvas.style = "width:100%;height:100%";
this.div.appendChild(canvas);
this.game = new Game(canvas);
this.game.initWebEvent();
}
componentWillUnmount() {
this.game.destroy()
}
render() {
return <div
className="game-page"
ref={(div) => this.div = div}
/>;
}
}
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment