关于typescript:教TSJS小白学习Puerts一把Puerts集成到Unity工程里

9次阅读

共计 2992 个字符，预计需要花费 8 分钟才能阅读完成。

应用 Puerts 须要用到的 JS/TS/Node.js 常识
- ts 和 js 的关系：Puerts 说简略点就是一个在 c# 运行时执行的 js 运行环境。ts 是 js 的扩大语法，而且 ts 并不能间接执行（临时不能），理论执行的其实是由 ts 生成的 js 代码。typescript 中文官网学习材料
- Node.js：Node.js 是一个电脑命令行环境下执行 js 的运行环境，在我了解 Node.js 和 js 语言的关系相似于.net 和 c# 的关系。为了将 ts 生成为 js，你须要在开发电脑上装置 Node.js。Node.js 中文网地址。下载长期反对版即可。
- npm 包管理器：npm 全名 Node Package Manager，装置完 Node.js 之后电脑中就有 npm 命令了。npm install命令能够从 npm 网站上下载并装置罕用的 js 依赖包。npm run命令能够执行在 package.json 中配置快捷命令。npm 命令官网文档 package.json 官网文档
先写一个 Hello World
- Puerts 运行原理是在运行时将 js 文件的内容作为字符串传给 JsEnv 对象。所以咱们应将 ts 文件寄存在 Unity 工程的 Assets 文件夹以外，以防止 Unity 为 ts 生成.meta，而将 ts 生成的 js 文件生成在 Assets 文件夹内，以供 Unity 运行时加载。
- 咱们先在 Assets 文件夹的同级创立一个 TsProj 文件夹，在命令行中运行 cd 到这个文件夹，并运行 npm init 命令，并始终回车到命令运行完结，这会创立一个 package.json 文件。
- 接下来装置依赖，运行命令 npm install typescript @types/node webpack-cli，这会创立一个 node_modules 文件夹，外面寄存着 typescript，@types/node，webpack-cli 这三个依赖包以及他们各自的依赖包，其中 typescript 依赖包中蕴含一个 tsc 可执行文件，即是将 ts 生成 js 的命令文件。其余依赖包稍后用到再解释。此时关上package.json，会看到外面多了dependencies 字段，外面列举了刚刚装置的依赖包和版本信息。
  另外同级还会呈现一个主动生成的 package-lock.json 文件，这个文件是用于锁定本次装置所有依赖包的具体版本号，必须保留。如果应用 git，也必须一起提交。
- 下一步咱们手动创立一个名为 tsconfig.json 的文本文件，其中书写如下内容
```
{
    "compilerOptions": {
        "target": "esnext",
        "module": "CommonJS",
        "sourceMap": true,
        "noImplicitAny": true,
        "typeRoots": ["node_modules/@types"],
        "moduleResolution": "node",
        "outDir": "../Assets/Resources"
    }
}
```
  这个文件会通知 tsc 命令如何生成 js 文件，如 outDir 指定了生成门路等等。tsconfig.json 官网中文文档
  这里咱们把 js 文件的生成门路选在 Assets/Resources 文件夹，这是为了在本文例子中不便 Unity 加载到代码，理论我的项目中咱们为了热更新，更多时候把 js 代码生成在 Assets/StreamingAssets 或其余地位期待打包成 AssetBundle，这个我将在前面文章中具体阐明。
- 而后咱们手动编辑一下 package.json 文件，在 scripts 字段中退出如下内容
```
...
"scripts": {
    "dev": "tsc --watch",
    "build": "tsc"
},
...
```
  这里的 dev 和build就是定义了两个 npm run 快捷指令。比方当你命令行中，在 TsProj 文件夹下运行 npm run dev，即等同于运行tsc --watch，即便你的电脑系统全局环境中不存在tsc 这个命令，npm 也会主动去以后文件夹的 node_modules/.bin 文件夹上来寻找 tsc 可执行文件。
  而这个 tsc --watch 命令的作用即是把以后文件夹下的所有 ts 文件依照 tsconfig.json 中指定的规定生成为 js 文件。--watch的意思是实时监控以后文件夹的文件变动，并立即从新生成变动的文件。这个机制就非常适合写代码的时候开启，边写边生成，实时失效。这也是为什么咱们应用 dev 这个快捷词来代表这条命令。
  npm build 对应的理论命令是 tsc，即只生成 js 而不监听变动。
- 筹备工作就绪，当初能够开始写 ts 代码了，创立 index.cts 文件，书写如下内容：
```
console.log("hello world");
```
  index 这个词在 ts/js 语言习惯中罕用来代表程序的入口
  
  为什么后缀要用 .cts 而非.ts？
  因为 .ts 生成的 js 文件名是.js，又因为此范例中应用 Puerts 的默认 Loader 只能将 js 文件生成在 Unity 的 Assets/Resources 文件夹下，并应用Resources.Load 函数加载文本资源，又因为 Resources.Load 不能辨认后缀为 .js 的文本资源。所以应用.cts 生成进去的 js 文件名是.cjs，是为了不便Resources.Load 函数辨认。同时，在 Node.js 的命名规范中，.cjs 代表应用惯例 js 语法编写的 js 代码，.mjs 代表应用新的 es6 语法编写的模块化 js 代码。所以应用 .cts/*.cjs 正好符合标准又合乎此处的须要。
  后续文章中我会介绍如何在 Puerts 中应用自定义 loader 加载文本资源，那时就能够应用看起来失常一点的.ts 和.js 了
- 上面生成 js，在命令行中执行npm run dev，此时命令行窗口进入继续监听状态，所以在后续开发过程中不要敞开这个窗口。如果须要运行其余命令就再开一个新窗口。
- 此时查看 Assets/Resources 文件夹，该当曾经呈现了 index.cjs 文件，和 index.cjs.map 文件，.map 文件是用于记录开发环境下 js 代码与 ts 代码中符号和行号映射关系的，个别是程序报错的时候才会用到。
- ts 这边的配置和代码生成工作都实现了，下一步开始回到 Unity 这边。将 Puerts 插件引入 Unity 工程的 Assets/Plugins 文件夹。我这里应用的是 github 上间接下载的 1.4.0 release 的 v8 版。
- 在 Unity 中关上一个空场景，在主相机上挂一个 Test.cs 脚本作为程序入口，在其中书写如下代码
```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Puerts;
public class Test : MonoBehaviour
{
    private JsEnv _jsEnv;
    void Start()
    {_jsEnv = new JsEnv();
        _jsEnv.ExecuteModule("index.cjs"); 
    }
}
```
  - 此时查看 Unity 控制台输入
- 下集预报
  Hello world 只是验证插件的可行性，想要将 Puerts 投入到商业我的项目的开发流程或生产环境中还须要定制很多方面的性能，例如实现 ts 文本资源的打包和热更新、ts 与 c#的互调传值、生成提醒文件和绑定代码、Inspector 面板拖拽赋值等等。下一篇咱们从 ts 和 c# 互调开始缓缓道来。