OPPO 快游戏在浏览器复现运行（三）之 require 函数

本质上，快游戏框架是基于V8引擎魔改出来的，因此天然支持require函数，但在 Web 中实现这个功能就不简单了，第一版的方案是想着将main.js作为模块在最顶级加载，然后通过将所有的require调用都改为await。

await require("./libs/min/laya.core.min.js");
await require("./libs/min/laya.ani.min.js");
await require("./libs/min/laya.ui.min.js");

async function require(url) {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = false;
    script.defer = false;
    script.src = url;
    await new Promise((resolve, reject) => {
        script.onload = () => {
            script.remove();
            resolve();
        };
        script.onerror = () => {
            script.remove();
            reject();
        };
        document.body.constructor.prototype.appendChild.apply(document.body, [script]);
    });
}

一开始，这个方案也是走得通的，对于一些简单的游戏改的方便，加载也是没啥问题的，但是随着接触的快游戏越来越多，这个方案就越发难走下去，主要有两个问题：

1. 对原代码侵入性太大，特别是对于加密混淆过的代码来说，改起来比登天难
2. 游戏初始化复杂性导致异步加载的方案始终会面临运行顺序差异导致的运行异常

特别是第二点，直接影响了web.sdk.js能否继续搞下去，因此异步加载的方案就毙了，必须走同步的形式，而同步加载第一个难点就是如何在浏览器中同步获取到压根没加载的JS代码呢？难不成在web.sdk.js之前先把所有的JS代码以字符串形式打包进去吗？不需要！！！不知道你们是否还记得上一篇文章中提到过得文件系统，回顾请看 → OPPO 快游戏在浏览器复现运行（二）之文件系统，而这个文件系统是带了同步 + 异步两套 API 的，那么就让我想到了一个非常有意思的方案。

在web.sdk.js初始化阶段，我们可以先通过异步 API 将整个游戏“安装”到浏览器中，而底层存储自然就通过 IndexedDB 来做了，让整个启动流程像打开 APP 一样，第一次先安装再打开的过程。“安装”完过后，我们就可以通过同步 API 将游戏的JS代码以同步的形式读取出来了。

读取问题解决了，那就剩下加载问题了，这里我们就需要在 Web 端把 NodeJS 中的require函数复刻出来了，这个的话有太多的现成库作参考了，这里我就使用了阮一峰老师的 tiny-browser-require 作为基础并针对快游戏做了一定的适配。

至此，require也算是比较“完美”的实现了，当然和原版require还是差很远的，比如寻路规则、循环依赖、加载缓存等等问题都没处理，但对于快游戏来说目前是够用了。

这也是这个项目最迷人的地方，所有的东西都是环环相扣的，少一样都不行，一旦把他们联通起来，那种茅塞顿开的感觉太妙了。