基于Typescript的渐进式通用游戏前端开发框架
A progressive universal game front-end development framework based on Typescript
Easy
用这个框架开发会是很容易很轻松很舒服的。
Evolutionary(渐进式)
用这个框架可以让我循序渐进的开发,而不是一上来就给我整一大套东西。在我有需要时就模块库取或者自己开发。
General(通用)
国内的游戏引擎有3个:
其他不太常用的有很多
各有优势,看项目和团队进行技术选型。
我想这个框架可以不受限于引擎,适用于各种项目,不必因为换引擎而重复造🚗子。
关于框架这个话题我写了几篇文章(感兴趣可以看一下)
💗模块管理器
框架的核心模块是一个极简强大的模块管理器,可以轻松接入任何TS/JS项目
「传送门」:egf-core
📦构建工具
框架的核心工具是一个基于rollup的开箱即用的模块构建工具,可以构建出各种模块规范的js+单.d.ts
同时支持监视开发模式哦
「传送门」:egf-cli
一个基于TypeScript的零依赖、跨引擎、高效、灵活、高可扩展的显示控制库(UI框架库)
「传送门」:display-ctrl
在仓库中同时提供了基于CocosCreator2.4.2和CocosCreator3D实现的库(包含layer层级管理库的实现),以及与FairyGUI相关的2.x实现和3.x实现
一个基于TypeScript的一套高效灵活的广播系统,可以帮助开发者轻松、有序的构建具有极具复杂性的关联交互和状态变化的游戏和应用。
特性
「传送门」:broadcast
一个基于TypeScript的零依赖、跨平台、灵活、高可扩展的网络库
特性
「传送门」:enet
一个通用的对象池管理模块,简单易用。
特性
「传送门」:obj-pool
通用层级管理模块,简单易用,对业务层透明。
「传送门」:layer
框架提供大部分模块的Demo示例供参考 「传送门」:examples
这是一个monorepo式的项目仓库,使用这种方式可以很好的管理多模块项目
Lerna是一种
monorepo
管理工具,可以优化使用git
和npm
管理多包存储库的工作流程。
最快最稳的
nodejs
包管理工具 墙裂推荐 更加适合在基于monorepo
的CocosCreator
项目中使用的nodejs
管理工具
为什么从Lerna+Yarn
切换为 Pnpm + Lerna
Yarn 安装包的方式,是扁平化,多个包依赖的包被安装到顶层的node_modules
。
这样会导致某个包没有依赖顶层node_modules
的包,也能引用并调用。
后果就是,依赖关系不准确,暗藏依赖,在协作时可能会出问题。
而且CocosCreator3.x
项目会识别错误,导致报找不到某某依赖的错。
另外一方面,使用感受上,Yarn+Lerna
很难用,安装速度慢,偶尔会出点问题。而Pnpm
则非常舒服
安装Pnpm
npm i pnpm -g
创建pnpm-workspace.yaml
packages:
# all packages in subdirs of packages/ and components/
- 'packages/**'
- 'tool-packages/**'
- 'transed-packages/**'
- 'examples/**'
# exclude packages that are inside test directories
- '!**/test/**'
兼容处理
因为很多项目(包括CocosCreator
),并不兼容下面这种包引用(protocol)
{
"dependencies": {
"foo": "workspace:*",
"bar": "workspace:~",
"qar": "workspace:^",
"zoo": "workspace:^1.5.0"
}
}
a. 需要创建一个.npmrc
文件
save-workspace-protocol = false
初始化安装
如果旧项目,可能需要删除掉所有的node_modules
之前用lerna+yarn
的,则可以使用lerna clean
然后
pnpm install
创建包
lerna create @xxx/xxx -y
lerna create @xxx/xxx
给包添加依赖
给指定包添加内部包依赖
pnpm add @xxx/xxx
给指定包添加开发时内部包依赖
pnpm add -D @xxx/b
给指定包添加外部包依赖(在指定包目录下)
pnpm add xxxx
给指定包添加开发时外部包依赖(在指定包目录下)
pnpm add xxxx -D
给所有包添加依赖(可以使用pnpm过滤,使用参考:https://www.pnpm.cn/filtering)
pnpm add lodash --filter "@ailhc/*"
给所有包添加开发时依赖(如果是添加内部包,需要加版本号@0.0.x)
pnpm add lodash -D --filter "@ailhc/*"
移除依赖
pnpm remove xxx
pnpm remove xxx --filter "a"
pnpm remove xxx --filter "@ailhc/*"
pnpm remove xxx
pnpm install
lerna clean
lerna version
会遍历所有包,检查修改,然后更新包的版本号,以及自动修改引用的包的引用版本号
生成一个提交,一个tag,以及推送到远程仓库
比如 packageA 修改了,版本号从1.0.0变成了1.0.1
然后引用了packageA的packageB、C的版本号也要递增,以及引用的packageA的版本号也要从1.0.0变成1.0.1
使用npm link 或 yarn link将指定包链接到全局
cd packages/core
npm link
到项目里创建链接(这个@egf/core是包名)
cd cocos-example
npm link @egf/core
游戏开发之路有趣但不易,
玩起来才能一直热情洋溢。
关注我, 一起玩转游戏开发!
在这游戏开发的道路上并肩前行
你的关注是我持续更新的动力~
在以下这些渠道可以找到我和我的分享和创作:
搜索关注:玩转游戏开发
或扫码:
一起讨论技术的 QQ 群: 1103157878
博客主页: https://pgd.vercel.app/
掘金: https://juejin.cn/user/3069492195769469
github: https://github.com/AILHC
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。