如何将像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

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

With Webpack (as entry)

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

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

webpack.config.js

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

使用Webpack(工作加载程序)

main.js

With Webpack (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

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

webpack.config.js

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

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

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 worker无法从父文件夹中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解决方案.

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.

"Webpack(作为条目)"示例实际上是从

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

• 它说明了如何使用Web Worker修改设置以引导角度
• 它也被称为Ionic项目的Webworker解决方案
• 您可能在worker文件夹中需要单独的ts配置
• 与工人一起构造TypeScript项目

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

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