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 [email protected] -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

Tags:

VirMach 便宜 VPS