如何让编译后的代码在 Worker 中运行（没有 Webpack）？

Posted 2023-02-19

【中文标题】如何让编译后的代码在 Worker 中运行（没有 Webpack）？

【英文标题】：How to get transpiled code to run in a Worker (without Webpack)?

【发布时间】：2021-11-22 07:15:16

【问题描述】：

我正在使用基于 SystemJS 的 TypeScript 项目，遵循此 example，其代码位于 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 之外 被转译，并按照blog 的建议使用单独的tsconfig.json。

但是，一旦我在 Worker 代码中尝试更复杂的东西，即导入/导出某些东西的类，我就会遇到运行代码的障碍。根据转译的格式（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，主要是因为我试图了解正在发生的事情。

【问题讨论】：

您可能会在 Web Workers - How To Import Modules 找到一些线索 - 您是否使用 type: module 选项创建您的工人？ IE。 new Worker("worker.js", type: "module" );

@SethLutske 你的type: "module" 解决方案有效，至少对"module": "ESNEXT" 有效——如果你想把它写成答案，我很乐意接受。

【参考方案1】：

如 cmets 中所述，如果您希望能够在 web worker 中使用 import 和 export 之类的模块语法，则需要使用 type: module 选项定义 worker，如下所示：

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

这将在问题Web Workers - How To Import Modules中进一步讨论