如何将像moment.js这样的库导入网络工作者

Question

我可以将安装了 npm 的库导入到 web worker 中吗？

我需要将moment.js 库用于网络工作者。

通过npm安装到node_modules/moment目录

我已经在 worker.js 文件的顶部尝试过这个：

importScripts('/node_modules/moment/moment.js');

但我明白了

GET http://192.168.2.1:8100/node_modules/moment/moment.js 404 (Not Found)

Answer 1

是的，有可能，您可能已经在使用像 webpack 或 parcel 这样的流行打包工具，但即使您不是，它仍然是可能的，尽管可能不是直接来自 node_modules

带包裹

main.js

// relative path to the worker from current file
const worker = new Worker('../utils/myWorker.js');

myWorker.js

// use import like you would in any other file
import moment from 'moment';

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

使用 Webpack（作为入口）

main.js

// relative to the expected public path (have in mind any filename transforms like hashing)
const worker = new Worker('myWorker.bundle.js');

myWorker.js

// use import like you would in any other file
import moment from 'moment';

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

webpack.config.js

{
  entry: {
    main: './src/app/main.js'
    worker: './src/utils/myWorker.js',
  },
  output: {
    path: `${ROOT_PATH}/public`,
    filename: '[name].bundle.js',
  }
}

使用 Webpack (worker-loader)

安装加载器

• npm install worker-loader --save-dev
• Webpack worker-loader 文档 https://www.npmjs.com/package/worker-loader

main.js

// relative path to the worker from current file
import Worker from '../utils/myWorker.worker.js';

const worker = new Worker();

myWorker.worker.js

// use import like you would in any other file
import moment from 'moment';

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
}

使用 CRA (Create React App) (worker-loader) 内联加载器

使用内联加载器

• npm install worker-loader --save-dev
• Webpack worker-loader 文档 https://www.npmjs.com/package/worker-loader
• 我们承认这一次我们想使用内联加载器语法（eslint-disable）

main.js

/* eslint-disable import/no-webpack-loader-syntax */
import Worker from "worker-loader!./myWorker.worker.js";

const worker = new Worker();

myWorker.worker.js

// use import like you would in any other file
import moment from 'moment';

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

您始终可以从 CDN 导入库

myWorker.js

importScripts('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js');

console.log(`From worker: worker started at ${moment().format('HH:mm:ss')}`);

其他捆绑程序

• 出于安全原因，Web 工作人员不能从父文件夹importScripts
• node_modules 文件夹通常位于项目的根目录，因此您无法使用importScripts 访问它
• 需要配置捆绑程序，以便内容可以别名或复制到工作人员可以访问的位置

AngularCLI、Ionic、CRA

对于使用 webpack 作为打包器的项目，只要您可以访问 webpack 配置并对其进行自定义，就可以调整 2 个 webpack 解决方案。 如果您无法访问配置 (CRA)，您可以使用“With CRA”示例中的内联加载程序

“Webpack (as entry)”的例子其实是从Angular CLI generated app with Web Workers借来的

• 它解释了如何使用 Web Worker 修改设置以引导 Angular
• 它也被称为 Ionic 项目的网络工作者解决方案

TypeScript 说明

• 您可能需要在工作文件夹中单独设置 ts 配置
• Structuring a TypeScript project with workers

{
  "extends": "../generic-tsconfig.json",
  "compilerOptions": {
    "lib": ["esnext", "webworker"],
  }
}

Answer 2

截至 2020 年 8 月 12 日。 通过执行这些步骤，我已经成功地将 npm 模块与 CloudFlare Workers 一起使用。

创建新项目：

wrangler generate your-project
cd your-project

设置 'wrangler.toml' 以使用 webpack：

name = "your-project"
type = "webpack"
account_id = "your-account-id"
workers_dev = true
route = ""
zone_id = ""

将你的 npm 模块导入 index.js 文件： 例如。

const qr = require('qr-image')

在终端/cmd:

wrangler publish

它会自动创建使用 webpack 打包的 worker。 现在它应该可以工作了。

希望这对某人有所帮助，在谷歌上找了很长时间，然后决定尝试教程并找到了这个！

Answer 3

从 webpack 5 开始，您可以使用 web worker 并导入库，而无需使用 worker-loader 或任何捆绑器 以简单的方式 如上所述 here

我设法以同样的方式运行我的网络工作者并导入库。

在你要导入web worker的文件中

// here ./deep-thought.js is the path to the web worker

const worker = new Worker(new URL('./deep-thought.js', import.meta.url));

worker.postMessage({
  question:
    'The Answer to the Ultimate Question of Life, The Universe, and Everything.',
});
worker.onmessage = ({ data: { answer } }) => {
  console.log(answer);
};

在网络工作者文件中，

// just to show it supports importing files into web worker in generic way

import JSONstream from 'JSONStream';

 self.onmessage = function (e) {
   // worker code inside

   // just to show it supports importing and using files into web worker in generic way

   const jsonParser = JSONstream.parse();
 }