导出模块 - export

控制器

由于jint并没有支持export,因此前面的文章中对于不同的视图,不得不使用不同的控制器名来区分,那么接下来讲解支持export的思路.首先新建一个控制器,代码如下:

1export class TSController {
2    public async onStart(): Promise<void> {
3        console.log('hello world');
4    }
5}

观察编译后的js,有3行跟export相关的代码,分别为:

Object.defineProperty(exports, "__esModule", { value: true });
exports.TSController = void 0;
exports.TSController = TSController;

每个js文件的exports都是单独的对象,因此我们可以用相对路径为键而exports为值赋予$loadedPackages,那么只需要修改第一行代码即可,代码如下:

1class CompileMenu
2{
3    [MenuItem("lite/编译")]
4    private static void OnMenu()
5    {
6        var dirs = Directory.GetDirectories($"{Application.dataPath}\\Resources");
7        foreach (var r in dirs)
8        {
9            var files = Directory.GetFiles(r, "*.js");
10            foreach (var cr in files)
11            {
12                string content;
13                using (var sr = File.OpenText(cr))
14                    content = sr.ReadToEnd();
15
16                content = content.Replace(
17                    "Object.defineProperty(exports, \"__esModule\", { value: true });",
18                    $@"var exports = $loadedPackages['{new DirectoryInfo(r).Name}/{cr.Name.Replace(".js", "")}'] = {{}};"
19                );
20                using (var sw = File.CreateText(cr))
21                    sw.Write(content);
22
23                // 略
24            }
25        }
26    }
27}

ViewSubject

原先我们是直接实例化TSController然后赋予$loadedPackages的,但是上面的修改将导致无法调用TSController.onStart,虽然我们可以在编译后的js代码末尾添加$loadedPackages['demo'] = new TSController(),这样的话对于非控制器代码,则需要额外处理,而且非控制器并不会被C#调用,因此更好的做法是在C#端对于控制器调用时的代码进行处理,大致代码如下:

1class ViewSubject : MonoBehaviour
2{
3    private void Start()
4    {
5        var code = string.Format(@"const ctrl = $loadedPackages['{0}'];
6if (!ctrl)
7    ctrl = new $loadedPackages['{0}/index'].TSController();
8
9const res = ctrl.onStart();
10if (res && res.then)
11    res.then(function () {{ }});
12", this.m_ControllerID);
13        this.m_Engine.Execute($"$loadedPackages.{this.m_ControllerID}.onStart()");
14
15        // 略
16    }
17
18    // 略
19}

导入模块 - import

控制器

首先增加一个TSControllerBase并增加一个抽象的onStart方法来约定控制器必须实现onStart方法,并修改之前的代码,大致代码如下:

1// lib/object/controller-base.ts
2export abstract class TSControllerBase {
3    public abstract onStart(): Promise<void> { }
4}
5
6// demo/index.ts
7import { TSControllerBase } from '../lib/object/controller-base';
8
9export class TSController extends TSControllerBase {
10    public async onStart(): Promise<void> {
11        console.log('hello world');
12    }
13}

观察编译后的js,原先的import会转换成require,因此只需要在jint中增加对象来支持require即可,由于我们将所有导入的模块都存放在了$loadPackages内,为了防止每次都加载资源并编译js代码,我们应该判断模块是否已经存在,如果不存在的情况下再加载并编译,因此require内判断模块是否存在,不存在的情况下,调用另外一个函数来加载js资源并编译,大致代码如下:

1// DemoCanvas
2class DemoCanvas : MonoBehaviour
3{
4    private readonly Regex PARENT_REG = new Regex(@"\.\./");
5
6    private void Awake()
7    {
8        this.m_Engine.Execute(@"
9this.require = function (path) {{
10    if (!this.$loadedPackages[path])
11        loadPackage(path);
12
13    return this.$loadedPackages[path];
14}};
15
16        this.Engine.SetValue(
17            "loadPackage",
18            new ClrFunctionInstance(this.Engine, this.LoadPackage)
19        );
20
21// 略
22");
23
24        // 略
25    }
26
27    public JsValue LoadPackage(JsValue thisObject, JsValue[] arguments)
28    {
29        var filePath = arguments[0].AsString();
30        filePath = PARENT_REG.Replace(filePath, string.Empty);
31        var js = Resources.Load<TextAsset>(filePath);
32        this.m_Engine.Execute(js.text);
33        return null;
34    }
35
36    // 略
37}

结尾

那么今天就到这里了,虽然代码并不好,而且当前的场景比较少,并不适合过早优化,因此会在后续的文章中有更多场景后再进行优化,如果文章中有任何错误或者疑问欢迎提问,我会尽快回复的,如果文章对你有帮助也欢迎打赏,谢谢.

unity3d支持typescript开发(六)

目录

导出模块 - export

导入模块 - import

结尾

评论区

相关推荐