@kbeaver/esbuild-plugin-inline-worker v2.0.0

@kbeaver/esbuild-plugin-inline

安装

npm npm install @kbeaver/esbuild-plugin-inline-worker -D

pnpm pnpm add @kbeaver/esbuild-plugin-inline-worker -D

设置

修改 esbuild 配置文件，在 plugins 里添加插件配置。

import esbuild from 'esbuild'
import inlineWorker from '@kbeaver/esbuild-plugin-inline-worker'

esbuild.build({
  //...
  plugins: [inlineWorker()],
})

buildOptions

inlineWorker(extraConfig)

• 此处的编译配置只针对 worker 文件。
• 可配置选项为 esbuild 的 BuildOptions 类型，可查看官方文档

esbuild.build({
  //...
  plugins: [
    inlineWorker({
      minify: true,
      target: 'es2017',
      format: 'esm',
    }),
  ],
})

使用

修改需要 inline 的 worker 的文件名，添加 blobworker 或 webworker、sharedworker 来确定使用方式。

*.blobworker.ts 使用带有 blobworker 名称的文件，会把内容转换为二进制导出。需要进一步处理才能使用，但更灵活。

// 转换后的文件
const blob = new Blob([code string], {type: 'text/javascript'})
export default blob

*.webworker.ts webworker 会把文件内容转换为二进制并创建好 worker 导出。

export default function inlineWorker() {
  const blob = new Blob([code string], {type: 'text/javascript'})
  const url = URL.createObjectURL(workerBlob)
  const worker = new Worker(url)
  URL.revokeObjectURL(url)
  return worker
}

*.sharedworker.ts sharedworker 会创建一个共享 worker 导出

export default function inlineWorker() {
  //...
  const worker = new SharedWorker(url)
  //...
}

使用 worker 的文件

// 转换成二进制导入
import workerBlob from 'examples.blobworker.ts'
const url = URL.createObjectURL(workerBlob)
const worker = new Worker(url)
URL.revokeObjectURL(url)

// 直接导入创建好的 Worker
import MyWorker from 'examples.webworker.ts'
const demoWorker = new MyWorker()

// 直接导入创建好的 Shared Worker
import MyWorker from 'examples.sharedworker.ts'
const demoWorker = new MyWorker()