Question

我正在尝试在web worker中使用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：

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

这导致了一个问题 - 我如何获得打字稿来生成它以便它运行。解决方案是设置一个主要的javascript文件，然后调用typescript部分的初始Web工作者应用程序？如果是这样，我该如何设置呢？

或者解决方法是以某种方式告诉typescript编译器从define更改为require并插入importScripts（）？

更新：看起来（最好的？）解决方案是主要的web worker文件是一个javascript文件。这有importScripts（）和主要的typescript类的require。您创建该类，它从那里运行。在那一点上，“导入”的打字稿“定义”所有作品。到目前为止......

Answer 1

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

打字稿如何导入Web worker中的外部模块

1 个答案: