ES 模块导入 - 总是可以完成吗？尝试导入 socket.io-client

如何解决ES 模块导入 - 总是可以完成吗？尝试导入 socket.io-client

我正在尝试使用“无构建”过程，因此我在 html 文件中使用了普通模块 script（遵循 Preact 文档）：

<script type="module">
  import {
    html,render,} from 'https://unpkg.com/htm/preact/index.mjs?module';
 
  function App(props) {
    return html`<h1>Hello ${props.name}!</h1>`;
  }

  render(html`<${App} name="world" />`,document.getElementById('root'));
</script>

如果我绕过模块系统并依赖于 window 全局（注意：我正在从已传递的 http 服务器提供 html 文件到 socket.io 的服务器并自动安装 /socket.io/socket.io.js）：

<script src="/socket.io/socket.io.js"></script>

<!-- in prevIoUs module script: -->
  const socket = window.io();

  socket.on('connect',() => {
    console.log('socket id>>',socket.id);
  });

我想从 ES 模块导入 socket.io 客户端。我知道我可以将 window 使用封装在我自己的 JS 文件中，然后将其导入到我的 html 中的模块脚本中，但我正在尝试这样做，但它不起作用：

  import io from '/socket.io.js'; // after copying socket.io.js to my public dir
  import { io } from 'https://cdnjs.cloudflare.com/ajax/libs/engine.io-client/3.5.0/engine.io.js'; // I have tried several variations of urls and what is imported

判断：

未捕获的语法错误：请求的模块“/socket.io.js”没有提供一个名为“default”的导出

并且通过“polyfill”ed（如果这是正确的术语）commonjs 全局变量如 module 在可能的 webpack 包中，它是 socket.io.js - 很可能只是不支持 ES此库的模块。

我可能会一遍又一遍地面临这个问题，所以我决定回到构建步骤。

我的问题是 - 有没有办法解决这个“不支持开箱即用的 ES 模块导入的第三方库”？也许通过我的一些工作，我可以解决这个问题，并尝试在没有构建步骤的开发中完成一个小项目。

解决方法

有没有办法解决这个“第三方库不支持开箱即用的 ES 模块导入”的问题？

不幸的是，没有，至少并非总是如此。浏览器不可能原生地 import 不是 ES 模块的东西。但是，如果您可以访问原始源代码，并且源代码本身是作为 ES 模块编写的（然后被转译/捆绑），那么您有时可以自己构建 ES 模块。

就 socket.io 而言，their repo 在 TypeScript 中托管源代码，它使用 import/export。不幸的是，他们的代码还使用了 require() 和其他 npm 包，这最终意味着它不能简单地转换为 ES 模块。