ts 中使用 worker 的问题

791 阅读1分钟

image.png

ts 引入worker 文件报错

1、安装插件

npm install worker-loader --save-dev

2、配置vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /.worker.(c|m)?js$/i,
          use: [
            {
              loader: "worker-loader",
            },
            {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"],
              },
            },
          ],
        },
      ],
    },
  }
};

3、将worker改造成构造函数,在src目录下新建一个worker-loader.d.ts文件内容如下

declare module "worker-loader!*" {
  // You need to change `Worker`, if you specified a different value for the `workerType` option
  class WebpackWorker extends Worker {
    constructor();
  }

  // Uncomment this if you set the `esModule` option to `false`
  // export = WebpackWorker;
  export default WebpackWorker;
}