手动构建pdf.js Viewer嵌入Webpack应用的System.js转译问题

我之前帮不少开发者解决过类似的pdf.js与Webpack整合的问题，你的需求核心就是要让手动构建的pdf.js Viewer摆脱对System.js的依赖，能被Webpack正常打包进自研应用里。下面给你几个靠谱的解决方案，按从易到难排序：

官方预构建的pdfjs-dist包已经完全处理了System.js依赖问题，直接拿来用就好：

• 先安装依赖：

  npm install pdfjs-dist
  

• 在你的index.js里这样导入和初始化：

  // 导入pdf.js核心库
  import * as pdfjsLib from 'pdfjs-dist';
  // 导入Viewer构造函数和样式
  import { Viewer } from 'pdfjs-dist/web/pdf_viewer';
  import 'pdfjs-dist/web/pdf_viewer.css';
  
  // 必须设置worker路径（Webpack会自动处理这个文件的打包）
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.min.js';
  
  // 接下来就是官方标准的Viewer初始化流程
  const container = document.getElementById('pdf-viewer-container');
  const viewer = new Viewer({
    container,
    // 可以添加其他配置项，比如toolbar、zoom等
  });
  
  // 加载PDF文件示例
  const loadingTask = pdfjsLib.getDocument('path/to/your/pdf.pdf');
  loadingTask.promise.then(pdf => {
    viewer.setDocument(pdf);
  });
  

这种方式不需要你自己构建pdf.js，直接用官方打包好的兼容版本，完全适配Webpack。

如果一定要自己手动构建pdf.js，那需要修改它的构建配置：

• 克隆pdf.js仓库到本地，进入项目目录
• 找到项目的Webpack配置文件（通常是webpack.config.js，不同版本可能位置有变化）
• 找到output配置块，把libraryTarget从system改成umd或者commonjs2——这会让构建产物变成Webpack能识别的标准模块格式
• 同时移除构建脚本中所有和System.js相关的注入逻辑（比如自动加载System.js的代码片段）
• 运行构建命令（比如npm run build），把生成的pdf_viewer.js和相关样式、worker文件导入到你的项目中

如果不想动pdf.js的构建流程，可以在你的Webpack配置里加入适配插件：

• 安装systemjs-webpack-interop：

  npm install systemjs-webpack-interop --save-dev
  

• 修改你的Webpack配置文件：

  const { SystemJSPublicPathWebpackPlugin } = require('systemjs-webpack-interop');
  
  module.exports = {
    // 你的其他Webpack配置...
    plugins: [
      new SystemJSPublicPathWebpackPlugin({
        systemjsModuleName: 'pdfjs-viewer', // 对应pdf.js的模块标识
      }),
    ],
    module: {
      rules: [
        // 转译pdf.js的ES6代码，确保Webpack能处理
        {
          test: /pdfjs-dist\/.*\.js$/,
          use: 'babel-loader',
          exclude: /node_modules\/(?!pdfjs-dist)/,
        },
      ],
    },
  };
  

• 之后在index.js里就可以正常导入pdf.js Viewer，插件会帮Webpack处理System.js的依赖解析

额外注意事项 #

• 不管用哪种方案，都要确保正确设置pdf.worker的路径——pdf.js的核心解析逻辑在worker中运行，Webpack可能会对worker文件做特殊处理，最好用file-loader单独处理或者指定绝对路径
• 如果遇到样式加载问题，检查你的Webpack配置是否包含了css-loader和style-loader，确保能解析pdf.js的css文件
• 测试时先从简单的本地PDF加载开始，验证Viewer能正常初始化和渲染，再逐步扩展功能

内容的提问来源于stack exchange，提问作者joshua.thomas.bird