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

是的，有可能，您可能已经在使用流行的捆绑程序，例如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

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

其他捆扎机

出于安全原因，Web工作人员无法从父文件夹中使用importScripts

node_modules文件夹通常位于项目的根目录，因此您无法使用importScripts来访问它。

需要配置捆绑程序，以便可以为内容添加别名或将其复制到工作人员可以访问的位置

AngularCLI和 ionic

对于将webpack用作捆绑程序的项目，只要您可以访问webpack配置并对其进行自定义，就可以调整2种webpack解决方案。

“Webpack(作为条目)”示例实际上是从 Angular CLI generated app with Web Workers借来的

它说明了如何使用网络 worker

将设置修改为自举角度

它也已被称为Ionic项目的Webworker解决方案

关于TypeScript的注意

您可能需要在工作文件夹

中使用单独的ts配置

Structuring a TypeScript project with workers

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