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

報錯內容並不能明確指出問題所在，使用了微信小程序原生的寫法並沒有任何問題，所以問題肯定出在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目錄

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

參考文檔

微信官方文檔Worker

Taro文檔createWorker

Taro的github相關issue