Vue使用pdf.js报错

Question

问题遇到的现象和发生背景

使用pdf.js实现预览pdf文件
在Vue项目中引用pdf.js插件时发生错误，导致项目启动报错

问题相关代码，请勿粘贴截图

import * as pdfjsLib from "@/untils/pdf.js"

运行结果及报错内容

报错：
class PDFDocumentLoadingTask {

1387 | static #docId = 0;
| ^

我的解答思路和尝试过的方法

import * as pdfjsLib from "@/untils/pdf.js"
或者
import pdfjsLib from "@/untils/pdf.js"
两种方式都试过不可以，降低版本也试过，该句代码pdfjsLib.getDocument(）会出现getDocument' of undefined的报错

我想要达到的结果

Answer 1

这个问题通常是因为Webpack不能正确处理JavaScript中的新语言特性，例如私有类字段（私有字段）。私有类字段是JavaScript的一种新特性，用于定义私有属性或方法。但是，在一些旧版Webpack中，可能没有安装或配置正确的Babel插件，不能正确解析这些新特性，从而导致解析错误。
解决这个问题的方法是安装并配置正确的Babel插件。下面是一个示例的配置：
1.安装babel-loader：
npm install -D babel-loader
2.安装@babel/core、@babel/preset-env和@babel/plugin-proposal-class-properties：
npm install -D @babel/core @babel/preset-env @babel/plugin-proposal-class-properties
3.在webpack配置文件中添加以下规则：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-class-properties']
        }
      }
    }
  ]
}

这将使用Babel加载器为JavaScript文件启用@babel/preset-env和@babel/plugin-proposal-class-properties插件，从而可以正确地处理私有类字段等新语言特性。