我可以将随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)
最佳答案
是的,有可能,您可能已经在使用流行的捆绑程序,例如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 装载程序)
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' }
}
]
}
}
npm install worker-loader --save-dev
worker-loader
文档https://webpack.js.org/loaders/worker-loader/ 您始终可以从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
来访问它。AngularCLI和 ionic
对于将webpack用作捆绑程序的项目,只要您可以访问webpack配置并对其进行自定义,就可以调整2种webpack解决方案。
“Webpack(作为条目)”示例实际上是从Angular CLI generated app with Web Workers借来的
关于TypeScript的注意
{
"extends": "../generic-tsconfig.json",
"compilerOptions": {
"lib": ["esnext", "webworker"],
}
}
关于ionic3 - 如何将像Moment.js这样的库导入Web Worker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48931878/