如何将像 moment.js 这样的库导入 Web Worker [英] How to import a library like moment.js into a web worker

问题描述

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

Can I import a library installed with npm into a web worker?

我需要在 Web Worker 中使用 moment.js 库.

I need to use the moment.js library into a web worker.

通过npm安装到node_modules/moment目录

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

I already have tried with this at the top of the worker.js file:

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

但是我明白了

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

推荐答案

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

Yes, it's possible, chances are you're already using a popular bundler like webpack or parcel, but even if you're not it's still possible, though probably not directly from node_modules

// 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

// 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)

/* 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')}`);

其他打包工具

• 出于安全原因，网络工作者无法从父文件夹importScripts
• node_modules 文件夹通常位于项目的根目录下，因此您无法使用 importScripts
访问它
• 需要配置打包器，以便为内容添加别名或复制到工作人员可以访问的位置

Other bundlers

• Web workers cannot importScripts from parent folders for security reasons
• The node_modules folder is usually at the root of the project so you can't access it with importScripts
• The bundler needs to be configured so that the content can be aliased or copied to a location the worker can access

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

For projects using webpack as a bundler the 2 webpack solutions can be adapted as long as you can access the webpack config and customize it. If you can't access the config (CRA) you can use the inline loader from the "With CRA" example

Webpack(作为条目)"示例实际上是从 Angular CLI 生成的带有 Web Workers 的应用程序中借用的

The "Webpack (as entry)" example was actually borrowed from Angular CLI generated app with Web Workers

• 它解释了如何修改设置以使用 Web Worker 引导 angular
• 它也被引用为 Ionic 项目的网络工作者解决方案
• 您可能需要在 worker 文件夹中有一个单独的 ts 配置
• 与工人一起构建 TypeScript 项目

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

这篇关于如何将像 moment.js 这样的库导入 Web Worker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！