沐光

记录在前端之路的点点滴滴

在 typescript 中添加 webworker

前言

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

配置 loader

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

  1. 安装 worker-loader
1
yarn add worker-loader -D
  1. 在 vue.config.js 内添加如下内容:
1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
chainWebpack: config => {
// ...
// 添加 worker-loader 支持
config.module
.rule('webWorker')
.post()
.test(/\.worker\.(j|t)s$/)
.use('worker-loader')
.loader('worker-loader');
}
}
  1. 重启项目

worker 文件的写法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 文件命名: 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);
});

参考文章