如何在普通JavaScript中使用npm包vocabulary-level-grader？

问题根源 #

1. 浏览器原生不支持Node.js的require()函数，直接使用会抛出Uncaught ReferenceError: require is not defined。
2. 包依赖的tlds是纯ESM格式，无default导出，部分加载方式试图导入default会触发Uncaught SyntaxError。

解决方案 #

方案一：原生ESM导入（无需打包） #

1. 将HTML中的脚本标记为module类型：

<script type="module">
  // 导入依赖的tlds（纯ESM，无default导出）
  import * as tlds from 'https://cdn.jsdelivr.net/npm/tlds@1.236.0/+esm';
  // 导入vocabulary-level-grader，兼容CommonJS转ESM的导出格式
  import vocabularyLevelGrader from 'https://cdn.jsdelivr.net/npm/vocabulary-level-grader@latest/+esm';
  // 处理导出：若包以default导出则取default，否则直接用导入对象
  const grade = vocabularyLevelGrader.default || vocabularyLevelGrader;
  
  // 调用功能
  const result = grade("示例文本...");
  console.log(result);
</script>

方案二：Browserify打包（适合复杂项目） #

1. 本地安装依赖及打包插件：

npm install vocabulary-level-grader
npm install --save-dev esmify

2. 创建入口文件index.js：

const grade = require("vocabulary-level-grader");
// 将grade挂载到window，方便浏览器全局调用
window.grade = grade;

3. 执行打包命令（用esmify处理纯ESM依赖tlds）：

browserify index.js -p esmify -o bundle.js

4. 在HTML中引入打包后的文件：

<script src="bundle.js"></script>
<script>
  const result = grade("示例文本...");
  console.log(result);
</script>

方案三：模拟Node.js require（用Skypack的createRequire） #

<script type="module">
  // 引入Node.js的createRequire工具
  import { createRequire } from 'https://cdn.skypack.dev/node:module';
  const require = createRequire(import.meta.url);
  
  // 用模拟的require导入包
  const grade = require('https://unpkg.com/vocabulary-level-grader@latest');
  const result = grade("示例文本...");
  console.log(result);
</script>

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