如何将像moment.js这样的库导入网络工作者 [英] How to import a library like moment.js into a web worker
问题描述
Can I import a library installed with npm into a web worker?
I need to use the moment.js
library into a web worker.
It is installed via npm
into the node_modules/moment
directory
I already have tried with this at the top of the worker.js file:
importScripts('/node_modules/moment/moment.js');
But I get
GET http://192.168.2.1:8100/node_modules/moment/moment.js 404 (Not Found)
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
With Parcel
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')}`);
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
// 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',
}
}
With Webpack (worker-loader)
Install the loader
npm install worker-loader --save-dev
- Webpack
worker-loader
documentation 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' }
}
]
}
}
With CRA (Create React App) (worker-loader) inline loader
Using an inline loader
npm install worker-loader --save-dev
- Webpack
worker-loader
documentation https://www.npmjs.com/package/worker-loader - we acknowledge we want to use the inline loader syntax this one time (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')}`);
You can always import the library from a 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')}`);
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 withimportScripts
- The bundler needs to be configured so that the content can be aliased or copied to a location the worker can access
AngularCLI, Ionic, 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
The "Webpack (as entry)" example was actually borrowed from Angular CLI generated app with Web Workers
- It explains how to modify the setup to bootstrap angular using web workers
- It have been referenced as a webworker solution for Ionic projects too
Note on TypeScript
- you may need a separate ts config in the worker folder
- Structuring a TypeScript project with workers
{
"extends": "../generic-tsconfig.json",
"compilerOptions": {
"lib": ["esnext", "webworker"],
}
}
这篇关于如何将像moment.js这样的库导入网络工作者的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!