解决 | class PDFDocumentLoadingTask { ＞ static #docId = 0； | | constructor() { 使用 legacy 构建版本

错误信息

vue2项目使用pdfjs-dist预览pfd文件
版本

"pdfjs-dist": "2.16.105",

使用

import * as pdfjsLib from 'pdfjs-dist'

报错信息

 Failed to compile with 1 error                                                                                                                                                                                                                      15:03:39

 error  in ./node_modules/pdfjs-dist/build/pdf.js

Module parse failed: Unexpected character '#' (1413:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| class PDFDocumentLoadingTask {
>   static #docId = 0;
|
|   constructor() {

 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FilePreview/PDFPreview.vue?vue&type=script&lang=js 8:0-39 51:28-48
 @ ./src/components/FilePreview/PDFPreview.vue?vue&type=script&lang=js
 @ ./src/components/FilePreview/PDFPreview.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/infra/reportFile/index.vue?vue&type=script&lang=js
 @ ./src/views/infra/reportFile/index.vue?vue&type=script&lang=js
 @ ./src/views/infra/reportFile/index.vue
 @ ./src sync ^\.\/views.*$
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/bpm/processInstance/detail.vue?vue&type=script&lang=js        
 @ ./src/views/bpm/processInstance/detail.vue?vue&type=script&lang=js
 @ ./src/views/bpm/processInstance/detail.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.1.2.133:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

这段错误信息表明，在 pdfjs-dist 库的某个文件中（如 pdf.js 文件的第 1413 行），出现了一个意外的字符 #。实际上，这是由于 pdfjs-dist 的默认构建版本使用了 JavaScript 私有字段语法（例如 static #docId = 0;），而这种语法（ES2022 私有类字段）默认并不被 Webpack 所支持，因为 Vue CLI 通常不会对 node_modules 下的代码进行转译。

为什么会出现这个错误？

• 私有字段语法：私有字段（以 # 开头的字段）是 ECMAScript 的新特性，在一些现代构建版本中会直接使用这种语法以获得更好的性能和更简洁的代码。但是默认情况下，Vue CLI 的 Babel 配置只会转译我们自己编写的代码，而不会转译 node_modules 中的代码。这样一来，当 pdfjs-dist 使用了这种语法时，Webpack 就会无法解析，从而报出 “Unexpected character '#'” 的错误。

• 默认构建 vs Legacy 构建：pdfjs-dist 提供了多个构建版本，其中默认的构建版本使用了最新的 JavaScript 语法（例如私有字段）。而它也提供了 legacy 版本，该版本经过了降级处理，不使用私有字段语法，能够兼容较旧的构建环境。

如何解决？

解决方法非常简单，只需在 vue.config.js 中配置 alias，将 pdfjs-dist 指向它的 legacy 构建版本即可。修改后的 vue.config.js 配置如下：

// vue.config.js
const path = require('path');

module.exports = {
  // 其他配置...
  resolve: {
    alias: {
      'pdfjs-dist': path.resolve(__dirname, './node_modules/pdfjs-dist/legacy/build/pdf.js')
    }
  }
};

配置说明：

• alias 配置：
  这里我们将 pdfjs-dist 模块的引用指向 node_modules/pdfjs-dist/legacy/build/pdf.js。legacy 版本经过降级处理，不包含 ES2022 的私有字段语法，因此可以被 Webpack 正常解析。

• __dirname：
  path.resolve(__dirname, ...) 用来获取项目根目录的绝对路径，确保路径配置正确。

总结

当你在使用 pdfjs-dist 库时，如果遇到编译错误提示 “Unexpected character '#'”，这通常是因为默认构建版本使用了现代 JavaScript 的私有字段语法，而 Vue CLI 默认不转译 node_modules 中的代码。解决方法就是在 vue.config.js 中配置 alias，将 pdfjs-dist 指向经过降级处理的 legacy 版本。这样既能保持功能，又能兼容较旧的编译环境。

希望这篇文章对你有所帮助，解决你的编译问题！