requirejs - typescript 如何在网络 worker 中导入外部模块

Question

我正在尝试在 Web Worker 的 typescript 中使用外部模块，但遇到了问题。测试示例的所有代码位于 www.windward.net/temp/WebWorkerRequireJs.zip (下面列出了关键的)。

我想要的 typescript (这在主线程中工作正常是:

import myClass = require('my-class');
class WorkerThread {
}
self.onmessage = function (e) {
    console.log("client received message = " + e.data);
    var mc = new myClass.MyClass();
    console.log("worker thread toUpper = " + mc.toUpper("dave"));
    self.postMessage("from client");
}

这会生成以下 javascript，但由于未定义定义而失败:

define(["require", "exports", 'my-class'], function(require, exports, __myClass__) {
    var myClass = __myClass__;

    var WorkerThread = (function () {
        function WorkerThread() {
        }
        return WorkerThread;
    })();
    self.onmessage = function (e) {
        console.log("client received message = " + e.data);
        var mc = new myClass.MyClass();
        console.log("worker thread toUpper = " + mc.toUpper("dave"));
        self.postMessage("from client");
    };
});
//# sourceMappingURL=worker-thread.js.map

所以第 1 步，我添加了 importScripts 并调用了这个 .js 文件:

importScripts('../../scripts/require.js');

define(["require", "exports", 'my-class'], function(require, exports, __myClass__) {
    var myClass = __myClass__;

    var WorkerThread = (function () {
        function WorkerThread() {
        }
        return WorkerThread;
    })();
    self.onmessage = function (e) {
        console.log("client received message = " + e.data);
        var mc = new myClass.MyClass();
        console.log("worker thread toUpper = " + mc.toUpper("dave"));
        self.postMessage("from client");
    };
});
//# sourceMappingURL=worker-thread.js.map

这不起作用并给出了错误:

Uncaught Error: Mismatched anonymous define() module: function (require, exports, __myClass__) {
    var myClass = __myClass__;

    var WorkerThread = (function () {
        function WorkerThread() {
        }
        return WorkerThread;
    })();
    self.onmessage =...<omitted>...ch 

然后我将“define”切换为“require”，这成功了:

importScripts('../../scripts/require.js');

require(["require", "exports", 'my-class'], function(require, exports, __myClass__) {
    debugger;
    var myClass = __myClass__;

    var WorkerThread = (function () {
        function WorkerThread() {
        }
        return WorkerThread;
    })();
    self.onmessage = function (e) {
        console.log("client received message = " + e.data);
        var mc = new myClass.MyClass();
        console.log("worker thread toUpper = " + mc.toUpper("dave"));
        self.postMessage("from client");
    };
});
//# sourceMappingURL=worker-thread.js.map

这引出了一个问题——我如何让 typescript 生成它以便它运行。设置主 javascript 文件的解决方案是初始 Web worker 应用程序，然后调用 typescript 部分？如果是这样，我该如何设置？

或者以某种方式告诉 typescript 编译器将 define 更改为 require 并插入 importScripts() 的解决方案？

更新: 看起来(最好的？)解决方案是主要的 web worker 文件是一个 javascript 文件。它具有 importScripts() 和主要 typescript 类的要求。您创建该类并从那里运行。在这一点上，使用“定义”的 typescript “导入”全部有效。到目前为止...

Answer 1

worker 文件不会被 AMD 加载器加载，而会被浏览器加载。因此，您需要脱离 AMD 代码生成并自己使用原始的“require”调用。