使webworker中支持使用import导入模块——threads.js

threads.js基本使用

使用vue-cli创建一个项目（我这里vue --version的版本是3.11.0）：

vue create hello-world

添加tool.js文件：

export function getSuffix() {
    return new Date().toDateString()
}

添加webworker.js文件，import引入tool.js文件，以验证webworker中支持import：

import sha256 from "js-sha256"
import { expose } from "threads/worker"
import { getSuffix } from './tool'

expose({
    hashPassword(password, salt) {
        let suffix = getSuffix();
        return sha256(password + salt) + `【当前时间：${suffix}】`
    }
})

添加master.js文件，

import { spawn, Thread, Worker } from "threads"

export async function getHashPassword() {
    const auth = await spawn(new Worker("./webworker"))
    const hashed = await auth.hashPassword("Super secret password", "1234")

    console.log("Hashed password:", hashed)

    await Thread.terminate(auth)
    return hashed;
}

注意，Worker从 threads.js 导入。

其中：

• spawn()创建一个新的工人
• expose()声明您希望您的工作人员公开哪些功能
• Thread.terminate()一旦你不再需要它就杀死工人

安装依赖：

npm install threads tiny-worker

使用 webpack 构建

Webpack 配置与threads-plugin一起使用。

它将透明地检测所有new Worker("./unbundled-path")表达式，捆绑工作代码并将new Worker(...)路径替换为工作包路径，因此您无需显式使用worker-loader或定义额外的入口点。

 安装threads-plugin：

npm install -D threads-plugin

然后将其添加到您的webpack.config.js：

const ThreadsPlugin = require('threads-plugin')

  module.exports = {
    // ...
    plugins: [
+     new ThreadsPlugin()
    ]
    // ...
  }

效果：

npm run serve后：

图中当前时间能正常输出证明tool.js被正常import了。