如何在 Worker（没有 Webpack）中将转译后的代码转换为运行？

Question

我正在使用一个基于 SystemJS 的 TypeScript 项目，遵循这个 example whose code is at https://github.com/tekmi/blogging-typescript-with-bundlers/blob/master/systemjs/app.ts

我能够在 TypeScript 中实现一个简单的 Worker，例如来自这个 example,

// src/worker/simulator.ts
const scope = (self as unknown) as Worker

scope.addEventListener('message', event => {
    console.log(event.data)
    scope.postMessage('pong')
})

它运行在 SystemJS 环境中很好 - 我确保它的代码在 SystemJS 的外部转译，带有单独的 tsconfig.json，如下blog.

的建议

但是，一旦我在 Worker 代码中尝试更复杂的东西，即 class 那个 imports/exports 的东西，我就遇到了运行的代码的障碍。根据转译格式（tsconfig 中的 "module"），我遇到以下问题：

"module": "ESNext" -> SyntaxError: Cannot use import statement outside a module
"module": "CommonJS" -> ReferenceError: exports is not defined
系统、AMD 等，存在与这些上下文相关的错误。

调用时已正确加载转译代码（我在 lite-server 的日志中看到它很好）。

我在网页上的按钮的事件代码中调用工作程序：

export function start(this: GlobalEventHandlers, ev: MouseEvent) {
    let worker = new Worker("../worker/simulator.js");
//...

我的结论是转译后的工作代码中缺少一些上下文，但我不知道是什么。这是我第一次在 TypeScript 中尝试 Workers。

这是我的 tsconfig.json src/worker 子项目（这个项目是为 CommonJS 模块转译配置的）：

{
  "extends": "../generic-tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "target": "ES6",
    "module": "CommonJS",
    // store the webworker transpiled files separately
    "outDir": "../../dist",
    "lib": [
      "ES6",
      "WebWorker"
    ],
  },
  "include": [
    "../worker/*",
    "../shared/*"
  ]
}

在此配置中允许（复杂的）Worker 运行需要什么？

我想尽可能避免使用 Webpack，主要是因为我想了解正在发生的事情。

Answer 1

如评论中所述，如果您希望能够在 Web Worker 中使用 import 和 export 等模块语法，则需要使用 type: module 选项，像这样：

new Worker("worker.js", { type: "module" });

这将在问题

中进一步讨论

如何在 Worker（没有 Webpack）中将转译后的代码转换为 运行？

How to get transpiled code to run in a Worker (without Webpack)?

typescript

systemjs

如何在 Worker（没有 Webpack）中将转译后的代码转换为运行？