如何将像Moment.js这样的库导入Web Worker

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

是的，有可能，您可能已经在使用像webpackor这样的流行捆绑器parcel，但即使您不是，它仍然有可能，尽管可能不是直接来自 node_modules

带包裹

主文件

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

我的工人.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（作为入门）

主文件

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

我的工人.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)

主文件

// 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' }
      }
    ]
  }
}

• npm install worker-loader --save-dev
• Webpackworker-loader文档https://webpack.js.org/loaders/worker-loader/

您始终可以从 CDN 导入库

我的工人.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')}`);

其他打包机

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

AngularCLI 和离子

对于使用 webpack 作为打包器的项目，只要您可以访问 webpack 配置并对其进行自定义，就可以调整 2 个 webpack 解决方案。

“Webpack (as entry)”示例实际上是从带有 Web Workers 的 Angular CLI 生成的应用程序中借来的

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

打字稿注意事项

• 您可能需要在 worker 文件夹中有一个单独的 ts 配置
• 与工人一起构建 TypeScript 项目

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