网页非Node.js环境使用p-limit的问题及疑惑

1. 能否通过<script src="...">形式直接使用p-limit？ #

可以，但得用支持UMD格式的旧版本。p-limit从v4开始改成纯ES模块，不再提供UMD/IIFE打包版本，直接用v6的index.min.js（包含import语句）在普通script标签里引入会触发语法错误。

你可以切换到v3.x版本（比如v3.1.0），它有适配全局环境的UMD打包文件：

<script src="https://cdn.jsdelivr.net/npm/p-limit@3.1.0/dist/index.umd.min.js"></script>
<script>
  // 直接通过全局变量调用
  const limit = pLimit(10);
</script>

这个版本引入后，pLimit会自动挂载到全局window对象上，无需额外配置。

2. 为什么ES模块导入后跨<script>块调用会提示pLimit is not defined？ #

因为ES模块有独立的模块作用域，每个type="module"的<script>都是一个隔离的模块，模块内的变量默认不会暴露到全局，也无法直接被其他模块或普通script访问。

如果要跨模块使用，有两种可行方案：

• 方案一：手动将pLimit暴露到全局
  在导入模块的script块里，把pLimit挂载到window对象：

  <script type="module">
    import pLimit from 'https://cdn.jsdelivr.net/npm/p-limit@6.2.0/+esm';
    // 暴露到全局作用域
    window.pLimit = pLimit;
  </script>
  <script>
    // 其他script块可直接调用
    const limit = pLimit(10);
  </script>
  

• 方案二：在需要使用的模块内重新导入
  如果其他script块也是type="module"类型，直接导入即可（浏览器会自动缓存模块，不会重复下载）：

  <script type="module">
    import pLimit from 'https://cdn.jsdelivr.net/npm/p-limit@6.2.0/+esm';
    const limit1 = pLimit(5);
  </script>
  <script type="module">
    import pLimit from 'https://cdn.jsdelivr.net/npm/p-limit@6.2.0/+esm';
    const limit2 = pLimit(10);
  </script>
  

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