打破CocosCreator3d不能使用npm包的魔咒!!! #9
AILHC
started this conversation in
Game Development Blogs
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
背景
我在开发EasyGameFramework这个框架的时候,目标之一是构建出来的模块包可以在CocosCreator3D上使用,使用体验和正常使用具有类型声明的Npm包一致。实在不行再用发布源码的方式。
在js生态中npm有很多很强大很有用的模块包
论坛上也有小伙伴对在CocosCreator3d上使用npm包有需求。
但CocosCreator3D的模块机制和CocosCreator不同,所以暂不支持直接使用npm包。
那怎么办呢?首先了解一下CocosCreator3d模块机制
CocosCreator3d模块机制
这个时候就得祭出调试的杀手级工具:Chrome Devtools
调试运行CocosCreator3d空项目
查看index.html
CocosCreator3d中使用了system.js,并且在index.html注册了一个叫 code-quality:cr的模块
而且加载了一个.import-map.json的东西
搜索.import-map.json看看是什么
通过以上的调试我们大概知道,CocosCreator3d使用了一个叫systemjs的库,然后呢,用来注册一些模块。这个systemjs可能是关键的东西,得了解一下。
了解过后,我们能知道它就是一个模块加载器,以及它的注册方式
但是怎么处理引用的呢?
断点调试systemjs
找到systemjs,搜索register
搜索importMap之类的关键词
通过以上调试验证了我们的猜想:SystemJs,用来注册和加载模块的,是一种模块规范,需要做特殊处理才能注册进去和使用。但我们需要来写一个简单的systemjs规范的模块来验证一下。
手写一个简单的SystemJs的模块
simple-sysjs.js
声明文件:simple-sysjs.d.ts
为了保证这个脚本优先于其他脚本加载,将simple-sysjs.js设置为插件
然后在编辑器新建脚本,写下
运行后可以看到输出:我是简单的systemjs模块
这个很简单的,大家都可以新建一个空C3d项目尝试一下。
经过验证尝试,我们知道,只要将npm包转成systemjs规范的文件就可以被我们的代码引用,以及正常使用了。但手写太麻烦了,有什么简单的办法呢?
如何快速地转换npm包为systemjs规范库
使用egf-cli
这个工具是我为EasyGameFramework打造的,目的是可以发布框架库为任意规范模块,给不同的引擎和项目使用。
有兴趣可以看看我之前写的文章
以及框架仓库:https://github.com/AILHC/EasyGameClientFramework.git
使用这个工具对npm包有一定的要求
我以xstate(一个高star的状态机库)为例子
c3d项目下安装 xstate ,npm i xstate
然后复制 EasyGameFrameOpen的package-template项目
修改包名为
修改构建命令为
删除其他ts文件,留下index.ts
然后写一句:
最后执行 yarn run build:system
最后的最后,因为xstate里引用了node的变量,所以在构建出来的index.js要加一句
复制lib和types到c3d项目,将index.js设置为插件
在任意脚本引用就可以
xstate2c3d的工程已经更新到EasyGameFrameOpen:https://github.com/AILHC/EasyGameFrameworkOpen.git
其他方式
CocosCreator3.0?
它也许会支持npm包,但等待它的到来可能还有一段时间
而且研究一下CocosCreator3d的模块加载机制说不定,在遇到看不懂的问题时有所头绪呢。
谢谢大家阅读我的文章,希望大家能有所收获。
最后
欢迎关注我的公众号,更多内容持续更新
公众号搜索:玩转游戏开发
或扫码:![img](https://camo.githubusercontent.com/ff49d98c6bae1df436218b70bc0fd0aa05623561731a0695efbfcda84a86dfe6/68747470733a2f2f636f64696e672d70616765732d6275636b65742d3433343134372d373538383739352d343537342d3336373533352d313235353533303038302e636f732e61702d6775616e677a686f752e6d7971636c6f75642e636f6d2f696d672f32303230313132383136343032332e706e67)
QQ 群: 1103157878
博客主页: https://ailhc.github.io/
掘金: https://juejin.cn/user/3069492195769469
github: https://github.com/AILHC
Beta Was this translation helpful? Give feedback.
All reactions