如何在HTML项目中正确使用npmjs上的js-sorted-set库？

我之前折腾过类似的纯HTML项目引入npm库的问题，给你整理几个有效的解决步骤：

1. 先确认文件路径是否正确 #

这是最容易踩的坑！你得确保sorted-set.min.js的路径和HTML里写的完全匹配：

• 比如如果文件放在项目根目录的lib文件夹下，路径应该写成 <script src="lib/sorted-set.min.js"></script>
• 可以打开浏览器的开发者工具（F12），切换到Network标签，刷新页面后看这个JS文件的状态：如果是404，说明路径绝对错了，赶紧修正。

2. 检查库的全局暴露情况 #

很多npm库打包后，在浏览器环境里不会自动把SortedSet挂载到window对象上。你可以打开下载的sorted-set.min.js文件看看：

• 如果是UMD格式的打包文件，会有判断typeof window !== 'undefined'的逻辑，这时候理论上window.SortedSet应该能拿到，但如果没拿到，试试手动暴露：

  <script src="path/to/sorted-set.js"></script>
  <script>
    // 手动把库的构造函数挂到全局
    window.SortedSet = SortedSet;
  
    // 接下来正常使用
    const set = new SortedSet({ comparator: (a, b) => b - a });
    set.insert(5);
    set.insert(3);
    set.insert(2);
    set.remove(3);
    const yes = set.contains(2);
    console.log(yes); // 应该输出 true
  </script>
  

• 要是还是不行，直接用GitHub上的未压缩源码（src/sorted-set.js），这个版本的导出更直接，手动挂载全局的成功率更高。

3. 极端情况：直接内嵌库代码 #

如果上面的方法都没效果，你可以把库的代码直接内嵌到HTML里，用IIFE包裹确保能拿到构造函数：

<script>
  // 把sorted-set.min.js的全部内容粘贴到这里
  (function() {
    // 从库代码里找到实际的构造函数名（比如源码里的SortedSet）
    const SortedSet = /* 这里替换成库内部的构造函数引用 */;
    
    // 正常使用
    const set = new SortedSet({ comparator: (a, b) => b - a });
    set.insert(5);
    set.insert(3);
    set.insert(2);
    set.remove(3);
    const yes = set.contains(2);
    console.log(yes);
  })();
</script>

4. 快速验证方法 #

在调用new SortedSet之前，先在控制台执行console.log(window.SortedSet)：

• 如果输出undefined，说明库没正确挂载到全局，回到步骤2检查导出逻辑；
• 如果输出函数，说明挂载成功，那大概率是你的使用代码有问题（比如参数写错）。

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