pdfjs-dist编译报错

错误说明：

pdf.js的新版本默认使用了很多TC39还在stage阶段的语法，并且package.json主入口锁定为非编译成es5的版本，而在vue-cli的默认配置下缺少相关编译的loader，导致编译报错。

这里建议无论是工程引用还是库引用，要么引用编译后的文件，要么锁定依赖版本

解决思路有三：

1、修改工具链，增加babel相关语法的plugin。

2、工程在引用pdfjs-dist的时候直接指向编译后的产出物，而不是包名。（import路径请注意参考：https://github.com/mozilla/pdf.js/issues/13190#issuecomment-815600801）

3、降低pdfjs-dist版本到无草案版本。

以上1工具链修改如下，2、3因为是修改代码就不介绍了。

错误现象：

ERROR1：

Module parse failed: Unexpected token (2902:55)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|                   intent: renderingIntent,
|                   renderInteractiveForms: renderInteractiveForms === true,
>                   annotationStorage: annotationStorage?.getAll() || null
|                 });
|               }

ERROR2：

Module parse failed: Unexpected token (4323:147)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|                 numPages: this._numPages,
|                 annotationStorage: (annotationStorage === null || annotationStorage === void 0 ? void 0 : annotationStorage.getAll()) || null,
>                 filename: ((_this$_fullReader = this._fullReader) === null || _this$_fullReader === void 0 ? void 0 : _this$_fullReader.filename) ?? null
|               }).finally(function () {
|                 if (annotationStorage) {

ERROR3:

class private methods are not enabled.

原因：

vue-cli默认的配置不能编译草案语法 Optional chaining 、Nullish coalescing operator 、Private class features

optional chaining (a?.b)

nullish coalescing operator (a ?? b)

解决操作：

1. 升级预置

   NOTE: This plugin is included in @babel/preset-env, in ES2022

2. 增加babel编译插件（先去MDN或rfc找特性关键字，然后去babel找对应插件）

   插件地址：https://www.babeljs.cn/docs/babel-plugin-proposal-optional-chaining

npm install --save-dev @babel/plugin-proposal-optional-chaining

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator

npm install --save-dev @babel/plugin-proposal-private-methods

安装后在babel配置文件babel.config.js或.babelrc增加babel插件引用：

plugins: ['@babel/plugin-proposal-optional-chaining','@babel/plugin-proposal-nullish-coalescing-operator','@babel/plugin-proposal-private-methods']

然后正常执行构建就可以了。