使用Rollup的JS库中的Web工作者

Question

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

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

Answer 1

有这样的插件：Alorel/rollup-plugin-web-worker，darionco/rollup-plugin-web-wworkloader

但我最终还是从头开始，为工作人员使用了一个单独的构建配置。这只是让我对局势有了更多的控制。

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

主rollup.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?...`);

如果有人想获得整个回购的链接，请留言，我会在那里发布。它仍在不断变化。

---

编辑：

在写下答案后，我遇到了这样一个问题：构建模块web workers以实现与汇总的跨浏览器兼容性(博客，2020年7月(

TL；DR如果您希望为工作人员使用EcmaScript模块，请注意！到目前为止，Firefox和Safari还没有支持。source并且Worker构造函数需要被告知工作程序源是ESM。