Webpack （下一个JS 10.2）音频工作集支持

我们的应用程序构建在Next之上，目前我们正在将音频录制引擎从脚本处理器迁移到音频工作集API。（当然是向后兼容）部分过渡也在升级到Webpack 5。我们正在利用网络工作者和音频工作集。在切换到Webpack 5之前，我们使用了Webpack 5，它提供了对工人的本地支持。它对这两个方面都非常有效，但是随着过渡，我们不能再依赖它了，因为它使用了过时的webpack API，接下来是它自己的捆绑Webpack4和Webpack5，它们似乎没有向后兼容

现在的挑战是如何将Webpack5与Next捆绑在一起使用。第一个问题来自web worker的全局范围未定义。可以通过将

config.output.globalObject

设置为

“（自我类型！='undefined'？自我：此）”来解决此问题。一旦worker能够正常工作，下一个问题将出现在尝试捆绑worklet代码时。目前，Webpack 5不支持工作集导入，但它们公开了解析器配置，可用于告诉Webpack将其作为工作程序加载，如下所示。除非您还设置了
config.output.publicPath=“/\u Next/”，否则使用Next将失败
通过
audioContext.audioWorklet.addModule（…）
加载区块时，代码崩溃，出现
未捕获类型错误：无法读取未定义的属性“webpackChunk”。如果我们检查包含捆绑工作集代码的区块，我们将看到此道具的使用方式如下：

var chunkLoadingGlobal=（typeof self！='undefined'？self:this）[“webpackChunk\u N\u E”]=（typeof self！='undefined'？self:this）[“webpackChunk\u N\u E”]；
var parentChunkLoadingFunction=chunkLoadingGlobal.push.bind（chunkLoadingGlobal）；
.
.
.
（typeof self！=“未定义”？self:this）[“webpackHotUpdate\u N\u E”]=函数。。。

很明显，
AudioWorkletGlobalScope
既没有
self
也没有
this
，这就是它运行不太顺利的原因

所以问题是，如何解决这个问题？音频工作集似乎仍然很少受到Next和Webpack的关注，尽管它现在在Safari中也默认可用。（从14.5开始）

下面是代表我们当前状态的代码片段。（我们正在使用Typescript）

next.config.js

module.exports=withPlugins（[…]{
未来：{webpack5:true}，
网页包：（配置，选项）=>{
config.output.globalObject=`（typeof self！=='undefined'？self:this）`；
config.output.publicPath=“/_next/”；
config.resolve={
…config.resolve，
别名：{
…config.resolve.alias，
“音频工作集”：path.resolve（_dirname，“src/util/audio worklet”）
}
}
config.module.parser={
…config.module.parser，
javascript:{
辅助程序：[“音频工作集中的音频工作集”，“…”]
}
}
config.output.chunkFilename=options.isServer
？`${options.dev？“[name].[hash]”：“[name].[chunkhash]”}.js`
：`static/chunks/${options.dev？”[name].[hash]：“[name].[chunkhash]”}.js`；
返回配置；
}
});

src/util/audio worklet.ts

export const AudioWorklet=（url:url）=>{
返回与字符串一样未知的url；
};

../audio context.ts

从“音频工作集”导入{AudioWorklet}；
const audioContext=新的audioContext（）；
audioContext.audioWorklet.addModule（新的audioWorklet（新的URL（“path/to/processor.worklet.ts”，import.meta.URL））；

../audio worklet processor.worklet.ts

//实用程序代码的导入语句
类处理器扩展了AudioWorkletProcessor{
//你的普通处理器代码
}
注册处理器（“处理器”，处理器）；

资料来源：







更新
经过大量挖掘，这个问题似乎是由网页包在块中导入脚本引起的。具体来说，当我们尝试导入任何非琐碎的代码（如lodash）或使用babel认为有必要使用其垫片的数据结构时，Webpack会注入
installChunk
函数，该函数使用
importScripts
，这显然是AudioWorklet不支持的。这也会插入上面的代码，导致未捕获类型错误：无法读取未定义的
的属性“webpackChunk\N\u E”

这是一个一对一复制的回购协议：（
nmp i
，然后
npm run dev
）
Hi Pavel，这是否意味着来自这里的修复（）最终不起作用？Hi@chrisguttain根本不起作用！你的修理很好。至少据我所知，这个问题与Webpack和Next本身完全无关。在下一个10.0.5版本上运行
worker插件
，一切正常。