工具
| 名稱 | 介紹 | 官網(wǎng) |
|---|---|---|
| Laya | 一款非常優(yōu)秀且流行的3D H5/小游戲引擎 | https://www.layabox.com |
| TSRPC | 專為 TypeScript 設(shè)計的 RPC 框架，經(jīng)千萬級用戶驗證， 適用于 HTTP API删性、WebSocket 實時應(yīng)用底挫、NodeJS 微服務(wù)等 |
https://tsrpc.cn |
背景
由于Laya并不支持npm的包管理方式進(jìn)行開發(fā)，如果想使用一些npm常用的軟件包是非常不方便的，而TSRPC又是以npm包的方式進(jìn)行管理分發(fā)。
因為TSPRC代碼中有很多其他另外的npm包引用，所以無法很方便的直接將TSPRC源碼丟入Laya中直接使用琢歇，因此最直接的辦法就是想方設(shè)法讓Laya支持npm，能夠在編譯時候連同引用到的依賴包一起編譯。
很幸運的是李茫，在TSRPC的官方微信群里得到了大佬的直接幫助揭保，很順利的就達(dá)到了目標(biāo)。
對于大佬的幫助涌矢，只想三連：
感謝掖举！很感謝！娜庇！十分感謝Ｋ巍！名秀！
步驟
那么要在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(),
]
...
大功告成励负，這個時候已經(jīng)可以寫個小小的調(diào)用測試代碼，然后使用Laya IDE按F6編譯匕得、運行继榆、查看結(jié)果了 ??
- 番外
如果在編譯過程中出現(xiàn)tslib找不到之類的報錯，可以嘗試注釋掉tsResolvedId(),這一句后重新試試
PS：以上方法適用于在Laya中使用其他npm包的情況
