导出模块 - export

控制器

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

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

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

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

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

class CompileMenu
{
    [MenuItem("lite/编译")]
    private static void OnMenu()
    {
        var dirs = Directory.GetDirectories($"{Application.dataPath}\\Resources");
        foreach (var r in dirs)
        {
            var files = Directory.GetFiles(r, "*.js");
            foreach (var cr in files)
            {
                string content;
                using (var sr = File.OpenText(cr))
                    content = sr.ReadToEnd();

                content = content.Replace(
                    "Object.defineProperty(exports, \"__esModule\", { value: true });",
                    $@"var exports = $loadedPackages['{new DirectoryInfo(r).Name}/{cr.Name.Replace(".js", "")}'] = {{}};"
                );
                using (var sw = File.CreateText(cr))
                    sw.Write(content);

                // 略
            }
        }
    }
}

ViewSubject

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

class ViewSubject : MonoBehaviour
{
    private void Start()
    {
        var code = string.Format(@"const ctrl = $loadedPackages['{0}'];
if (!ctrl)
    ctrl = new $loadedPackages['{0}/index'].TSController();

const res = ctrl.onStart();
if (res && res.then)
    res.then(function () {{ }});
", this.m_ControllerID);
        this.m_Engine.Execute($"$loadedPackages.{this.m_ControllerID}.onStart()");

        // 略
    }

    // 略
}

导入模块 - import

控制器

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

// lib/object/controller-base.ts
export abstract class TSControllerBase {
    public abstract onStart(): Promise<void> { }
}

// demo/index.ts
import { TSControllerBase } from '../lib/object/controller-base';

export class TSController extends TSControllerBase {
    public async onStart(): Promise<void> {
        console.log('hello world');
    }
}

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

// DemoCanvas
class DemoCanvas : MonoBehaviour
{
    private readonly Regex PARENT_REG = new Regex(@"\.\./");

    private void Awake()
    {
        this.m_Engine.Execute(@"
this.require = function (path) {{
    if (!this.$loadedPackages[path])
        loadPackage(path);

    return this.$loadedPackages[path];
}};

        this.Engine.SetValue(
            "loadPackage",
            new ClrFunctionInstance(this.Engine, this.LoadPackage)
        );

// 略
");

        // 略
    }

    public JsValue LoadPackage(JsValue thisObject, JsValue[] arguments)
    {
        var filePath = arguments[0].AsString();
        filePath = PARENT_REG.Replace(filePath, string.Empty);
        var js = Resources.Load<TextAsset>(filePath);
        this.m_Engine.Execute(js.text);
        return null;
    }

    // 略
}