打字稿如何在网络工作者中导入外部模块

Question

我正在尝试在网络工作者的 typescript 中使用外部模块，但遇到了问题。测试示例的所有代码都在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

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

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

更新： 看起来一个（最好的？）解决方案是主 web worker 文件是一个 javascript 文件。这具有 importScripts() 和主要打字稿类的要求。你创建了那个类，它从那里运行。那时打字稿“导入”会导致“定义”所有工作。到目前为止...

Answer 1

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