Electron+Vue项目引入pdfjs-dist遇Module Parse Failed错误求助

问题 #

在Electron Vue项目中执行import * as pdf from 'pdfjs-dist';时触发以下错误：

error in ./node_modules/pdfjs-dist/build/pdf.js
模块解析失败：意外字符 '#' (1413:9) 你可能需要合适的加载器来处理该文件类型，当前没有配置任何加载器来处理此文件。
| class PDFDocumentLoadingTask {

static #docId = 0; | | constructor() {

项目克隆自指定仓库，无显式webpack配置，仅包含babel.config.js。

解决办法 #

方法1：让Babel转译pdfjs-dist #

修改babel.config.js，将pdfjs-dist加入需要转译的依赖列表：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  transpileDependencies: ['pdfjs-dist']
}

方法2：降级pdfjs-dist版本 #

安装不使用ES私有类字段的旧版本，避免转译问题：

npm install pdfjs-dist@2.16.105 --save

方法3：通过vue.config.js配置webpack #

如果项目基于vue-cli构建，在根目录新建vue.config.js，添加webpack规则处理pdfjs-dist的文件：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          include: /node_modules\/pdfjs-dist/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@vue/cli-plugin-babel/preset']
            }
          }
        }
      ]
    }
  }
}

内容的提问来源于stack exchange，提问作者ale10ander