Taro使用多线程Worker相关问题解决
Taro使用多线程Worker相关问题解决
JavaScript 语言采用的是单线程模型，HTML5标准中的Web Worker ，为 JavaScript 创造多线程环境。微信小程序也有相应的Worker，同样具备多线程运行的能力
主页面中创建worker
创建一个 Worker 线程。目前限制最多只能创建一个 Worker，创建下一个 Worker 前请先调用 Worker.terminate
Copy// src/pages/index.tsxconst worker = Taro.createWorker('workers/request/index.js'); // 文件名指定 worker 的入口文件路径，绝对路径worker.postMessage({ msg: 'hello from main'})
worker.onMessage((msg) => { console.log(msg, 'worker post msg')
})worker线程
Copy// src/workers/request/index.jsworker.postMessage({ msg: 'hello from worker',
});workers路径配置
Copy// src/app.config.tsexport default { // ...
workers:'workers' // 配置 workers 字段，表示 worker 代码根目录}Taro编译后，微信开发者工具运行报错
控制台报错：thirdScriptError worker uncaught third Error
报错内容并不能明确指出问题所在，使用了微信小程序原生的写法并没有任何问题，所以问题肯定出在Taro这边，在Taro issue中发现了同样的问题，在Taro编译时并没有将workers打包到dist目录
解决方案
使用Taro编译配置中提供的copy，来将workers目录拷贝到dist目录中
Copymodule.exports = { // ...
copy: { patterns: [
{ from: 'src/workers', to: 'dist/workers' } // from:源文件中workers的路径，to:编译后的路径
]
}
}Taro也提供了使用webpack的plugin的配置，可以自行安装copy-webpack-plugin 来实现拷贝workers的功能
安装copy-webpack-plugin插件，copy-webpack-plugin 5.x 和 6.x 版本patterns配置有区别。这里不熟悉的话也是个坑
npm install copy-webpack-plugin@6.4.1 -D
Taro的config文件
Copy// config/index.jsmodule.exports = { // ...
mini: { // ...
webpackChain(chain, webpack) {
chain.merge({ plugin: { copyPlugin: { plugin: require('copy-webpack-plugin'), args: [{ patterns: [{ from: path.resolve(__dirname, '../src/workers'), to: 'workers' }] }],
},
},
});
},
}
}成功编译后dist目录会生成workers目录
使用的Taro版本是3.2.6。Taro至今也没有把解决方案更新到文档中，仅在issue中回复了第一种解决方法。
参考文档
微信官方文档Worker
Taro文档createWorker
Taro的github相关issue
作者： SchneiderABB
出处：https://www.cnblogs.com/madlife/p/14801006.html