JavaScript导入jsPDF模块报错的问题排查求助

报错根因 #

• require是Node.js CommonJS模块规范的语法，浏览器原生不支持；用browserify编译时抛出'import' and 'export' may appear only with 'sourceType: module'错误，是因为新版jsPDF采用ESM规范编写，browserify默认仅支持CommonJS模块解析，没开ESM兼容配置的情况下根本识别不了import/export语法。
• 原生import抛出Failed to resolve module specifier "jspdf"错误，是因为浏览器原生ESM规则不支持直接写包名（也就是裸模块说明符），要求引入路径必须以/、./、../开头；VS Code Live Server只是个纯静态文件服务，没有内置npm包路径解析、模块打包能力，没法自动把包名映射到node_modules里的对应文件。

这是成本最低的实现方式，不需要任何打包工具，直接用浏览器兼容的预构建文件即可：

• 从本地npm安装的jspdf包的dist目录里，找到jspdf.umd.min.js文件，复制到你自己项目的静态资源目录（比如自建的./vendor/文件夹）
• 在HTML页面里用相对路径引入这个脚本：

<script src="./vendor/jspdf.umd.min.js"></script>

• 引入后全局window对象会自动挂载jsPDF，直接调用就行：

const { jsPDF } = window.jspdf;
// 测试功能
const doc = new jsPDF();
doc.text('测试PDF导出内容', 10, 10);
doc.save('导出文件.pdf');

写完直接用Live Server打开页面就能正常运行，没有兼容问题。

如果一定要用原生ES Module的import写法，不要直接写"jspdf"这种裸包名，改成指向具体文件的相对路径，同时给script标签加上type="module"属性：

<script type="module">
  // 直接指向node_modules内的jsPDF ESM构建文件
  import { jsPDF } from './node_modules/jspdf/dist/jspdf.es.min.js';
  const doc = new jsPDF();
  doc.text('测试内容', 10, 10);
  doc.save('导出.pdf');
</script>

注意：这个方式有兼容隐患，如果jsPDF的内部依赖用了裸模块名引入资源，还是会抛模块解析错误，稳定性不如方案1。

browserify对ESM规范的兼容很差，换成零配置的现代前端构建工具（比如Vite），不需要手动改模块解析配置就能正常识别jsPDF的导入语法：

• 项目目录下执行命令安装依赖：

npm install jspdf

• 在入口JS文件里正常写导入语句即可，不需要改路径：

import { jsPDF } from 'jspdf';
const doc = new jsPDF();
// 编写PDF导出相关的业务逻辑

• 执行npx vite启动开发服务，工具内置了npm包路径解析、ESM/CJS模块兼容能力，不会出现裸模块解析错误、语法识别错误这类问题。

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