Vite中导入pdfjs worker的私有类语法Polyfill失效问题求助

在旧版浏览器（如Safari 14及以下）中使用pdfjs worker时出现语法错误，提示无效字符'#'，推测是类私有字段特性未被Polyfill。已配置Vite的legacy插件但问题仍存在，以下是可行的解决方法：

错误信息 #

XCode中Safari 14或更低版本的报错：

⚡️  SyntaxError: Invalid character: '#'
⚡️  URL: capacitor://localhost/assets/pdf.worker.min-339a4ae5.js

Worker使用方式 #

import pdfWorker from 'pdfjs-dist/build/pdf.worker.min.js?url';
PdfJs.GlobalWorkerOptions.workerSrc = pdfWorker;

当前Vite配置 #

export default defineConfig({
    plugins: [
        react(),
        legacy({
            targets: ['Safari >= 14', 'iOS >= 14', 'not IE 11', 'Android >= 10'],
            polyfills: true,
        }),
        svgrPlugin(),
        checker({ typescript: true }),
    ],

    resolve: {
        alias: tsconfigPathAliases,
    },
    server: {
        open: true,
    },
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './src/setupTests.ts',
    },
} as UserConfigExport);

解决方法 #

1. 让legacy插件强制处理Worker文件 #

Vite的legacy插件默认可能不会覆盖Worker模块，需要在配置中明确开启对Worker的转译，并通过rollup手动拆分worker chunk：

export default defineConfig({
    // ...原有配置
    build: {
        rollupOptions: {
            output: {
                manualChunks: {
                    'pdf-worker': ['pdfjs-dist/build/pdf.worker.min.js']
                }
            }
        }
    },
    plugins: [
        react(),
        legacy({
            targets: ['Safari >= 14', 'iOS >= 14', 'not IE 11', 'Android >= 10'],
            polyfills: true,
            modernPolyfills: true, // 启用现代polyfill覆盖更多场景
            renderLegacyChunks: true
        }),
        // ...其他插件
    ],
})

2. 降级pdfjs-dist版本 #

新版本pdfjs可能引入了Safari 14不支持的语法特性，降级到兼容性更好的版本（如3.x系列）可以直接规避问题：

npm install pdfjs-dist@3.11.174 --save
# 或 yarn add pdfjs-dist@3.11.174

3. 手动转译Worker文件 #

如果上述方法无效，可以手动处理worker文件：

• 复制node_modules/pdfjs-dist/build/pdf.worker.min.js到项目本地目录（如src/workers/）
• 配置Babel对该文件转译，添加处理私有字段的插件：
  在项目根目录创建.babelrc：

  {
    "presets": [["@babel/preset-env", { "targets": { "safari": "14" } }]],
    "plugins": [
      "@babel/plugin-proposal-private-property-in-object",
      "@babel/plugin-proposal-private-methods"
    ]
  }
  

• 运行Babel转译文件：

  npx babel src/workers/pdf.worker.min.js --out-file src/workers/transpiled-pdf.worker.js
  

• 修改代码引用转译后的文件：

  import pdfWorker from './src/workers/transpiled-pdf.worker.js?url';
  PdfJs.GlobalWorkerOptions.workerSrc = pdfWorker;
  

4. 单独配置Worker的转译规则 #

在Vite中为Worker模块单独配置legacy插件，确保转译生效：

export default defineConfig({
    // ...原有配置
    worker: {
        format: 'iife', // 旧版浏览器更兼容的格式
        plugins: () => [
            require('@vitejs/plugin-legacy')({
                targets: ['Safari >= 14', 'iOS >= 14'],
                polyfills: true
            })
        ]
    }
})

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