工具
| 名称 | 介绍 | 官网 |
|---|---|---|
| Laya | 一款非常优秀且流行的3D H5/小游戏引擎 | https://www.layabox.com |
| TSRPC | 专为 TypeScript 设计的 RPC 框架，经千万级用户验证， 适用于 HTTP API、WebSocket 实时应用、NodeJS 微服务等 |
https://tsrpc.cn |
背景
由于Laya并不支持npm的包管理方式进行开发，如果想使用一些npm常用的软件包是非常不方便的，而TSRPC又是以npm包的方式进行管理分发。
因为TSPRC代码中有很多其他另外的npm包引用，所以无法很方便的直接将TSPRC源码丢入Laya中直接使用，因此最直接的办法就是想方设法让Laya支持npm，能够在编译时候连同引用到的依赖包一起编译。
很幸运的是，在TSRPC的官方微信群里得到了大佬的直接帮助，很顺利的就达到了目标。
对于大佬的帮助，只想三连：
感谢！很感谢！！十分感谢！！！
步骤
那么要在Laya中通过npm使用上TSRPC一共需要几步呢
第一步：在Laya项目根目录下新建一个package.json文件
{
"devDependencies": {
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-tslib-resolve-id": "^0.0.0"
},
"dependencies": {
"tsrpc-browser": "^3.3.0",
"tsrpc-miniapp": "^3.3.0"
}
}
第二步：在Laya项目根目录下运行npm i安装依赖包
npm i
第三步：修改.laya目录下得compile.js文件
...
const path = require('path');
const fs = require('fs');
+const resolve = require('rollup-plugin-node-resolve');
+const tsResolveId = require('rollup-plugin-tslib-resolve-id');
+const commonjs = require('rollup-plugin-commonjs');
...
plugins: [
+ tsResolveId(),
+ resolve(),
typescript({
tsconfig: workSpaceDir + "/tsconfig.json",
check: true, //Set to false to avoid doing any diagnostic checks on the code
tsconfigOverride: { compilerOptions: { removeComments: true } },
include: /.*.ts/,
+ exclude: /node_modules/,
}),
glsl({
// By default, everything gets included
include: /.*(.glsl|.vs|.fs)$/,
sourceMap: false,
compress: false
}),
/*terser({
output: {
},
numWorkers:1,//Amount of workers to spawn. Defaults to the number of CPUs minus 1
sourcemap: false
})*/
+ commonjs(),
]
...
大功告成，这个时候已经可以写个小小的调用测试代码，然后使用Laya IDE按F6编译、运行、查看结果了 😄
- 番外
如果在编译过程中出现tslib找不到之类的报错，可以尝试注释掉tsResolvedId(),这一句后重新试试
PS：以上方法适用于在Laya中使用其他npm包的情况
