Taro使用多線程Worker相關問題解決


JavaScript 語言采用的是單線程模型,HTML5標准中的Web Worker ,為 JavaScript 創造多線程環境。微信小程序也有相應的Worker,同樣具備多線程運行的能力

主頁面中創建worker

創建一個 Worker 線程。目前限制最多只能創建一個 Worker,創建下一個 Worker 前請先調用 Worker.terminate

// src/pages/index.tsx
const worker = Taro.createWorker('workers/request/index.js'); // 文件名指定 worker 的入口文件路徑,絕對路徑
worker.postMessage({
    msg: 'hello from main'
})
worker.onMessage((msg) => {
    console.log(msg, 'worker post msg')
})
worker線程
// src/workers/request/index.js
worker.postMessage({
    msg: 'hello from worker',
});
workers路徑配置
// src/app.config.ts
export default {
  // ...
  workers:'workers' // 配置 workers 字段,表示 worker 代碼根目錄
}
Taro編譯后,微信開發者工具運行報錯

控制台報錯:thirdScriptError worker uncaught third Error

Snipaste_2021-05-23_11-17-23.png

報錯內容並不能明確指出問題所在,使用了微信小程序原生的寫法並沒有任何問題,所以問題肯定出在Taro這邊,在Taro issue中發現了同樣的問題,在Taro編譯時並沒有將workers打包到dist目錄


解決方案

使用Taro編譯配置中提供的copy,來將workers目錄拷貝到dist目錄中

module.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文件

// config/index.js
module.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目錄

Snipaste_2021-05-23_13-09-43.png

使用的Taro版本是3.2.6。Taro至今也沒有把解決方案更新到文檔中,僅在issue中回復了第一種解決方法。

參考文檔

微信官方文檔Worker

Taro文檔createWorker

Taro的github相關issue


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM