网站首页

layaair -tsrpc使用方法

发布时间：2022-05-30 00:53查看次数：1468

背景

由于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编译、运行、查看结果了    

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "noEmitHelpers": true,
    "sourceMap": false,
    "skipLibCheck": true,
        "outDir": "dist",
    // "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node"
  },
}