Angular 9 无法使用可选链接加载 pdfjs (v. 2.8.335) 模块

Question

我正在尝试将我的 Angular 应用程序中的 pdfjs 模块更新到下一个版本 (2.8.335)，但出现以下错误：

ERROR in C:/project/node_modules/pdfjs-dist/build/pdf.js 2205:45
Module parse failed: Unexpected token (2205:45)
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
|         intent: renderingIntent,
|         renderInteractiveForms: renderInteractiveForms === true,
>         annotationStorage: annotationStorage?.serializable || null
|       });
|     }
ERROR in C:/project/node_modules/pdfjs-dist/web/pdf_viewer.js 613:31
Module parse failed: Unexpected token (613:31)
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
|   _cachedPageNumber(pageRef) {
|     const refStr = pageRef.gen === 0 ? `${pageRef.num}R` : `${pageRef.num}R${pageRef.gen}`;
>     return this._pagesRefCache?.[refStr] || null;
|   }

这个问题与@angular-devkit/build-angular@0.901.15使用的webpack版本有关，我用的是Angular9.这个版本的build-angular使用 webpack@4.42.0 触发这些错误。我发现高于 5 ver 的 webpack 支持开箱即用的可选链接和 null-coalescing，但我受限于 Angular 9，无法将其更新到更高版本以加载 build-angular 和作为依赖，webpack 到更高版本。

有没有办法配置 webpack 以支持 js 的可选链接和空合并功能，以便将模块加载到我的应用程序中？

Answer 1

根据 Akxe 的提示，我设法通过以下方式解决了问题：

@angular-devkit/build-angular 描述了构建器@angular-builders/custom-webpack:dev-server here。我将此构建器添加到我的项目的 angular.json 文件中，如下所示：

...
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "myApp:build",
    "proxyConfig": "apps/myApp/proxy.conf.js",
    "customWebpackConfig": {
      "path": "apps/myApp/webpack.config.js"
    }
  },
...

if file webpack.config.js 我添加了带有过滤器的 babel loader 以仅从 pdfjs-dist 加载文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.*pdfjs-dist.*$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

此配置允许将 pdfjs 的 es2020 模块转换为早期版本的 js，这很容易被标准的 webpack 配置使用，由 angular 在幕后定义。

Angular 9 无法使用可选链接加载 pdfjs (v. 2.8.335) 模块

Angular 9 fails to load pdfjs (v. 2.8.335) module with optional chaining

pdf.js

webpack

angular

ecmascript-2020