如何解决在汇总应用程序中加载具有动态导入的音频文件？
问题总结
我正在将使用音频文件（.wav、.ogg 等）的应用程序从 Webpack 迁移到 Rollup。
使用 Webpack，所有音频文件都使用 ../../assets 从本地目录 require.context 动态导入，并在捆绑过程中发送到 public 文件夹并提供。
这非常有用，因为我可以像这样获取大量的音频文件名：
getSamplesNames() {
const r = require.context("../../assets/samples",false,/\.wav$/);
// return an array list of filenames (with extension)
const importAll = (r) => r.keys().map((file) => file.match(/[^\/]+$/)[0]);
return importAll(r);
}
然后使用动态导入加载每个文件。
loadSample(sampleName) {
import(`../../assets/samples/${sampleName}.wav`)
.then(() => this.engine.loadSample(sampleName,`/samples/${sampleName}`))
.catch((err) =>
console.error(`DEBUG:AudioEngine:lazyLoadSample: ` + err)
);
}
loadImportedSamples() {
this.getSamplesNames().forEach((sampleName) =>
this.lazyLoadSample(sampleName)
);
this.samplesLoaded = true;
}
使用 Rollup，我面临两个问题：
-
Rollup 中似乎没有 Webpack 的
require.context等价物 -
我无法使用动态导入变量导入音频文件
我的尝试
我摆弄了一些汇总插件
这个插件建议替换 Webpack 的 require.context，但经过一些反复试验、依赖问题以及与其他正确代码区域中的动态导入相关的构建错误，我决定不使用它。
我发现使用 plugin-url 的成功配置可以动态导入文件，同时将它们发送到 dist 文件夹（见下文）。
url({
include: ['**/*.wav'],limit: 10,// 10 kb
emitFiles: true,fileName: '[name][extname]',sourceDir: __dirname,destDir: join(__dirname,'dist/sema-engine/samples'),}),但是，我认为 plugin-url 是做静态分析的，它只在没有动态变量的情况下通过动态导入成功地发出文件。
这需要导入带有完整链接的每个文件，当您有 50 个或更多样本时，这会导致具有硬编码 URL 的巨大功能。
importSamples(){
import(`../../static/samples/909.wav`) // need to use the samples relative path to the src,not in public,.then((e) => {
// this.engine.loadSample(sampleName,`/samples/${sampleName}.wav`)
this.engine.loadSample(e.default,`/samples/${e.default}`)
})
.catch((err) =>
console.error(`Enginge lazy loading sample: ${sampleName}` + err)
)
import(`../../static/samples/909b.wav`) // need to use the samples relative path to the src,`/samples/${e.default}`)
})
.catch((err) =>
console.error(`Engine lazy loading sample: ${sampleName}` + err)
)
}
我尝试使用 https://www.npmjs.com/package/rollup-plugin-dynamic-import-variables，但它似乎无法与 rollup-plugin-URL 很好地结合起来。
我必须有什么替代方案才能像最初使用 Webpack 那样编写简洁的东西，而不是为每个样本打包 50 个动态导入的黑客代码？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。