TypeScript 如何在 Web Worker 中导入外部模块

Question

我正在尝试在网络工作者的打字稿中使用外部模块，但遇到了问题。测试示例的所有代码都位于 www.windward.net/temp/WebWorkerRequireJs.zip（下面列出了关键代码）。

我想要的打字稿（这在主线程中工作得很好）是：

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 

然后我将“定义”切换为“要求”，这有效：

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

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

或者是以某种方式告诉打字稿编译器从定义更改为 require 并插入 importScripts() 的解决方案？

更新： 看起来（最好的？）解决方案是主要的 Web Worker 文件是一个 javascript 文件。它具有 importScripts() 和主打字稿类的要求。您创建该类并从那里运行。此时，使用“定义”的打字稿“导入”就可以了。到目前为止...

Answer 1

工作文件不会由 AMD 加载程序加载，而是由浏览器加载。 因此，您需要突破 AMD 代码生成并自己使用原始“require”调用。

Answer 2

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

require(["worker-thread"], function(WorkerThreadModule) {
    // bla bla bla
    let workerThread = new WorkerThreadModule.WorkerThread();
});