Skip to content

alloy worker 接入教程

Jump to bottom
CntChen edited this page Apr 3, 2021 · 11 revisions

前端业务中, 需将 Web Worker 的业务代码打包为独立文件. 需要你调用 alloy-worker npm 包, 并手动将它的源码融合到你的项目里, 成为项目源码的一部分. 好在手动也不复杂, 而且不会影响现有业务.

接入前提

alloy-worker 源码基于 TypeScript 编写, 使用 Webpack4 构建. 这对项目有 2 点要求:

  • 项目需支持 TypeScript 代码构建. 未支持也可以先接入, 在接入过程中解决 ts 构建报错.
  • 项目需是 Webpack 版本 v4 及以上.

以 github 上名为 template 的项目为例, 了解如何接入 alloy-worker.

下载源码

将 template clone 到本地目录.

$ git clone https://github.com/CntChen/template.git

安装 alloy-worker

$ cd /path/to/template
$ npm install alloy-worker -D

复制 Worker 源码

将 worker 通信源码复制到 template 项目目录中, 会复制到 src/worker 目录下.

$ cd /path/to/template
$ npx alloy-worker eject
$ git status
      + src/worker/

添加类型声明

alloy-worker 的 TypeScript 类型声明添加到 ./tsconfig.json.

{
     "files": [
        "./node_modules/alloy-worker/lib/typings/index.d.ts"
    ],
}

alloy-worker 依赖 __WORKER__ 这个构建变量. 需要在 ./eslintrc.js 中添加声明.

{
    globals: {
        __WORKER__: 'readonly'
    }
}

主线程构建添加 alloy-worker-plugin

接入 alloy-worker 后, 主线程构建需添加 alloy-worker 插件.

在 template 中修改 scripts/get-webpack-config.js.

const AlloyWorkerPlugin = require('alloy-worker/lib/plugin');

const webpackConfig = {
    plugins: [
         new AlloyWorkerPlugin({}),
    ],
};

添加的 plugins 用于解决 2 个问题:

  • Worker 线程需要构建为独立 js 资源, 通过这个 plugin 实现.
  • 主线程和 Worker 线程同构代码需要区分环境, plugin 提供了构建变量 __WOKRER__.

创建 alloy-worker

在主线程引入 alloy-worker, 实例化和调用 alloy-worker. 在 template/src/template/index.ts 中添加如下代码.

import createAlloyWorker from '../worker/index';

// 创建 AlloyWorker 实例
const alloyWorker = createAlloyWorker({
    workerName: 'alloyWorker--test',
});

// 挂载到全局环境, 用于调试
// @ts-ignore
window.alloyWorker = alloyWorker;

// 发起第一次调用
alloyWorker.workerAbilityTest.communicationTest()
    .then((res) => console.log(`%cWorker test result: ${res}`, 'color: green; font-size: 20px'));

跑构建

终于可以愉快地开始构建.

$ npm i
// dev
$ npm run dev
// dist
$ npm run dist

当你看到下图的输出, 表明你的项目已经实现 Worker 资源的构建!

➜  template git:(master) ✗ tnpm run dev
                  Asset       Size      Chunks
        worker-index.js    153 KiB              [emitted]        
    worker-index.js.map    176 KiB              [emitted] [dev]

查看接入是否成功

在浏览器中调试项目页面:

$ cd ./template
$ http-server -c0 ./dist
Available on:
  http://127.0.0.1:8080

打开控制台, 如果看到下图的 log. 恭喜你! 你的项目已经成功接入 alloy-worker.

到此, 你的项目已经具备 Worker 能力, 怎么使用 alloy-worker, 请看这里.

可能遇到的问题

TypeScript 报错

Alloy-worker 的 ts 规则可能和项目里的不一致, ts check 可能报错. 如果遇到需要手动修复一下.

代码转译

alloy-worker 项目本身采用 Babel7 + browserslist + core-js 实现按需 transpile/polyfil.

接入后, alloy-worker 已经成为你项目源码的一部分, 所以 ES6+ 源码的 transpile/polyfill 由项目接管. 主要关注主线程和 Worker 线程中的 Promise 和 async/await 在目标浏览器(如 IE10)的运行情况.

其他问题

如果遇到其他接入问题, 请给我们提 issue.

EOF

Clone this wiki locally