如何解决将web worker捆绑为npm软件包的组成部分,并具有单文件webpack输出
我正在编写一个npm包,它是流行库leafletjs的插件。我正在使用webpack打包软件包。我希望此程序包能够按命令生成和销毁某些Web工作者。网络工作者代码是我的源文件的一部分。但是我希望能够将软件包作为npm模块或通过CDN分发,这意味着必须将其编译为单个文件,该文件可以通过HTML标头包含。我正在使用webpack来做到这一点。所以可以说我有一个工作文件:
// sample.worker.js
import { doSomeStuff } from './algorithm.js';
onmessage = function (e) {
const results = doSomeStuff(e.data)
postMessage({
id: e.data.id,message: results',});
};
这很简单,但是这里重要的一点是,我的工作人员实际上是从算法文件中导入一些代码,而该算法文件又是在导入一些节点模块。我的工作人员在某个地方的主模块中使用过,像这样:
// plugin.js
import SampleWorker from 'worker-loader!./workers/dem.worker.js';
export function plugin(){
// do some stuff
const worker = new SampleWorker()
worker.postMessage(someData);
worker.onmessage = (event) => {};
}
我的webpack配置如下:
module.exports = {
entry: './src/index',output: {
path: path.resolve(__dirname,'build'),filename: 'my-plugin.js',},resolve: {
extensions: ['.ts','.tsx','.js','.json'],module: {
rules: [
{
test: /\.worker\.js$/,loader: 'worker-loader',options: {
inline: 'fallback',{
test: /\.(ts|js)x?$/,exclude: /node_modules/,loader: 'babel-loader',],externals: { ... },plugins: { ... }
};
这不能按原样工作-webpack尝试将主捆绑包和每个工作脚本文件以相同的名称捆绑在一起。在filename: '[name].js'
下更改为output
可以解决此问题,但是给了我很多文件-一个用于主捆绑包,另一个给我的源代码中每个工作文件一个文件。
阅读webpack选项后,我认为使用inline: 'fallback'
选项实际上会为每个工作程序创建一个Blob,并将其捆绑到主输出文件中。那没有发生。
到目前为止,我的解决方案是将工作人员写为blob,如下所示:
// workers.js
const workerblob = new Blob([`
// cannot import in a blob!
// have to put algorithm.js code here,copy in any external module code here
onmessage = function (e) {
const results = doSomeStuff(e.data)
postMessage({
id: e.data.id,message: results,});
};
`])
export const sampleWorker = URL.createObjectURL(workerblob);
// my-plugin.js
import { sampleWorker } from 'workers.js'
const worker = new Worker(sampleWorker)
这确实有效-Webpack现在输出1个单个文件,其中包含工作程序代码。使用this answer的修改版本,我至少可以将代码放入function( ...code... ){}.toString()
格式中,这样至少可以得到智能感知,语法突出显示等。但是我不能使用导入。>
我该如何使用Webpack捆绑我的工作人员,以使整个捆绑最终以1个文件,工作人员代码及所有文件结尾?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。