在 typescript 中添加 webworker

前言

最近在做 Vue 项目时遇到一个读取 xlsx 文件的需求，考虑到文件可能比较大的情况，为了不让页面卡死，因此引入了 webworker，本来想着应该是很容易的事情，结果却并不是很简单，主要难在配置上，这里就记录一下配置时遇到的困难。

配置 loader

因为是 ts 写的项目，因此查阅了一下引入 webworker 需要那些插件，因此首先需要配置的是 loader 文件了。

1. 安装 worker-loader

yarn add worker-loader -D

2. 在 vue.config.js 内添加如下内容：

module.exports = {
  chainWebpack: config => {
    // ...
    // 添加 worker-loader 支持
    config.module
      .rule('webWorker')
      .post()
      .test(/\.worker\.(j|t)s$/)
      .use('worker-loader')
      .loader('worker-loader');
  },
};

3. 重启项目

worker 文件的写法

在 ts 项目中，类型声明是很重要的一点，对于 worker 文件因为没有导出，在主进程中引入会很棘手，参考网上的例子，一般 worker 文件需要这么配置

// 文件命名： xxx.worker.ts
// 创建 this 指针，或者配置 webpack 的 output 的 globalObject 属性
const _self: Worker = self as any;

// 监听 message 事件
_self.addEventListener(
  'message',
  e => {
    // ...
  },
  false,
);

// 监听错误事件
_self.addEventListener('error', e => {
  throw new Error(e.message);
});

参考文章

• Web Worker 使用教程
• 如何使用 JavaScript 实现纯前端读取和导出 excel 文件
• webpack + typescript 环境下配置