vue2 + typescript 使用 worker

1、安裝插件

npm install worker-loader --save-dev

2、配置vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.worker\.(c|m)?js$/i,
          use: [
            {
              loader: "worker-loader",
            },
            {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"],
              },
            },
          ],
        },
      ],
    },
  }
};

3、將worker改造成構造函數，在src目錄下新建一個worker-loader.d.ts文件內容如下

declare module "worker-loader!*" {
  // You need to change `Worker`, if you specified a different value for the `workerType` option
  class WebpackWorker extends Worker {
    constructor();
  }

  // Uncomment this if you set the `esModule` option to `false`
  // export = WebpackWorker;
  export default WebpackWorker;
}

4、創建my.worker.ts 文件

 

const ctx: Worker = self as any;
// 監聽 message 事件
ctx.addEventListener('message', (res) => {
  console.log('很好收到消息了');
  // 向主線程發送消息
  if (res.data.type === 'ok') {
    ctx.postMessage('你錯沒？');
  } else {
    throw new Error('error');
  }
}, false);

// 或
// ctx.onmessage = (e) => {
// };

// 監聽錯誤事件
ctx.addEventListener('error', (e) => {
  console.log('error');
});

// 或
// ctx.onerror = (e) => {
//   console.log(e);
// };

export default ctx;

 

5、使用worker

<template>
  <div class="about">
    <h2>Woker 使用</h2>
    <h2>title: {{ title }}</h2>
    <h2>title2: {{ title2 }}</h2>
  </div>
</template>
<script lang="ts">
import Worker from 'worker-loader!./my.worker';
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class About extends Vue {
  public title: string = '';
  public title2: string = '';
  public mounted() {
    const worker = new Worker();
    console.log(worker);

    // 主進程向子進程發送信息:
    worker.postMessage({
      type: 'ok',
    });

    // 主進程接收子進程返回信息:
    worker.onmessage = (res) => {
      this.title = res.data;
      // 關掉進程
      worker.terminate();
    };
    worker.postMessage({
      type: 'no',
    });
    worker.onerror = () => {
      this.title2 = '我錯了。';
      // 關掉進程
      worker.terminate();
    };
  }
}
</script>

 參考資料：https://webpack.js.org/loaders/worker-loader/