带有 Rollup 的 JS 库中的 Web Worker

Question

我正在使用 Thread.js 网络工作者在 Typescript 中构建一个 negamax 引擎。它是一个 npm 库，将由使用 webpack 构建的应用程序导入。

我正在使用 Rollup 来构建引擎 - 如何导出 web-worker 文件，以便将它们作为单独的块复制到客户端的构建目录中？

Answer 1

有这样的插件：Alorel/rollup-plugin-web-worker、darionco/rollup-plugin-web-worker-loader

..但我最终还是从头开始做，为工作人员使用了单独的构建配置。这只是让我更好地控制局势。

附件是rollup.config.worker.js我用的。

mainrollup.config.mjs导入此文件，并将其配置作为第一个构建配置。真正的构建配置用于@rollup/plugin-replace将工作人员的哈希值注入到加载它的代码中。

/*
* Rollup config for building web worker(s)
*
* Imported by the main rollup config.
*/
import sizes from '@atomico/rollup-plugin-sizes'
import resolve from '@rollup/plugin-node-resolve'
import replace from '@rollup/plugin-replace'
import { terser } from 'rollup-plugin-terser'

import {dirname} from 'path'
import {fileURLToPath} from 'url'

const myPath = dirname(fileURLToPath(import.meta.url));

const watch = process.env.ROLLUP_WATCH;

const REGION = process.env.REGION;
if (!REGION) throw new Error("'REGION' env.var. not provided");

let loggingAdapterProxyHash;

const catchHashPlugin = {
  name: 'my-plugin',

  // Below, one can define hooks for various stages of the build.
  //
  generateBundle(_ /*options*/, bundle) {
    Object.keys(bundle).forEach( fileName => {
      // filename: "proxy.worker-520aaa52.js"
      //
      const [_,c1] = fileName.match(/^proxy.worker-([a-f0-9]+)\.js$/) || [];
      if (c1) {
        loggingAdapterProxyHash = c1;
        return;
      }
      console.warn("Unexpected bundle generated:", fileName);
    });
  }
};

const pluginsWorker = [
  resolve({
    mainFields: ["esm2017", "module"],
    modulesOnly: true       // "inspect resolved files to assert that they are ES2015 modules"
  }),
  replace({
    'env.REGION': JSON.stringify(REGION),
    //
    preventAssignment: true   // to mitigate a console warning (Rollup 2.44.0); remove with 2.45?
  }),
  //!watch && terser(),
  catchHashPlugin,

  !watch && sizes(),
];

const configWorker = {
  input: './adapters/logging/proxy.worker.js',
  output: {
    dir: myPath + '/out/worker',   // under which 'proxy.worker-{hash}.js' (including imports, tree-shaken-not-stirred)
    format: 'es',   // "required"
    entryFileNames: '[name]-[hash].js',   // .."chunks created from entry points"; default is: '[name].js'

    sourcemap: true,   // have source map even for production
  },

  plugins: pluginsWorker
}

export default configWorker;
export { loggingAdapterProxyHash }

在主配置中使用：

  replace({
    'env.PROXY_WORKER_HASH': () => {
      const hash= loggingAdapterProxyHash;
      assert(hash, "Worker hash not available, yet!");
      return JSON.stringify(hash);
    },
    //
    preventAssignment: true   // to mitigate a console warning (Rollup 2.44.0); remove with 2.45?
  }),

..并在 Worker 加载代码中：

const PROXY_WORKER_HASH = env.PROXY_WORKER_HASH;    // injected by Rollup build

...
new Worker(`/workers/proxy.worker-${PROXY_WORKER_HASH}.js?...`);

如果有人想获得整个存储库的链接，请留言，我会将其发布到那里。它仍在不断变化。

编辑：

写完答案后，我遇到了这个：Building module webworkers for cross browser compatibility with rollup（博客，2020 年 7 月）

TL;DR 如果您希望为工作人员使用 EcmaScript 模块，请注意！截至目前，Firefox 和 Safari 尚不支持。source并且Worker需要告诉构造函数worker源是ESM。