如何使用AudioWorklet打包npm模块？

wqnecbli 于 2023-05-29 发布在其他

关注(0)|答案(1)|浏览(198)

我构建了一个AudioWorklet，它导入了一个npm模块。这在运行时工作，但在编译时失败。我的理解（但对Worklets和WebWorkers来说是新的）是AudioWorklet代码需要是自包含的，并且不能在生产中提取导入。
我们可以在构建时使用npm导入来编译AudioWorklet吗（或者其他更好的做法）？使用Vite进行前端编译。
下面是我的Worklet的一个简化示例，但没有真实的的代码来缩短示例。

import { ToolWASM } from 'tool/dist/wasm.es.js'
import Tool from 'tool/dist/core.es.js'

let tool = new Tool(ToolWASM)

class SampleProcess extends AudioWorkletProcessor {
constructor() {
    super()
    this.tool = tool
  }

  process() {
    this.tool.doSomething()
    return false
  }
}

registerProcessor('sample-processor', SampleProcess)

npm

来源：https://stackoverflow.com/questions/76324021/how-to-package-npm-module-with-audioworklet

1条答案

按热度按时间

t98cgbkg1#

我最终提出的解决方案使用了Rollup来实现它。最后添加了一个基本的Rollup设置，以便在运行时和编译时绑定文件。我这样做，因为试图将它整合到Vite中，影响了Vite与我的Tauri应用程序的即插即用设置。
这种方法使我能够完全独立地运行我的rollup，并且在构建应用程序的其余部分之前。
rollup.config.js的设置如下。

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import replace from 'rollup-plugin-replace'

export default {
  input: 'src/worklets/file.js',

  output: {
    file: 'src/bundles/file-bundle.js',
    format: 'iife',
  },

  plugins: [
    resolve({
      browser: true,
      preferBuiltins: false,
    }),
    commonjs(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
  ],
}

在我的package.json中创建了几个可以运行的脚本。对于任何好奇的人来说，build:<name>和dev:<name>都使用npm-run-all，所以您看到的脚本是顺序运行（build）或并行运行（dev）的脚本的一部分。

"scripts": {
  ...
  "build:bundle": "yarn rollup",
  ...
  "dev:bundle": "yarn rollup --watch",
  ...
  "rollup": "rollup --c",
}

赞(0）回复(0）举报 2023-05-29

我来回答

如何使用AudioWorklet打包npm模块？

1条答案

相关问题

热门标签

最新问答