0

我正在尝试在我的 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 版本有关，我使用了适用于Angular 9 的最新版本。这个版本的build-angular 使用了触发这些错误的webpack@4.42.0。我发现在高于 5 版本的 webpack 中支持可选链接和空合并，但我受限于 Angular 9，无法将其更新到更高版本以加载 build-angular 和作为依赖项，webpack 到更高版本。

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

4

1 回答 1

1

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

@angular-devkit/build-angular 具有此处描述的构建器 @angular-builders/custom-webpack:dev-server 。我在我的项目中将此构建器添加到 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"
    }
  },
...

如果文件 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 引擎下定义。

于 2021-05-26T21:09:40.093 回答