ES模块导入-总是可以吗?尝试导入socket.io-client的失败示例

Question

我正在尝试使用一个"构建更少"；所以我在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)，我就能让客户端socket.io正常工作：

<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"没有提供名为"默认"的导出

和"；polyfill"；ed(如果这是正确的术语)可能是socket.io.js的webpack捆绑包中的像module这样的commonjs全局-很可能这个库不支持ES模块。

我可能会一次又一次地面对这个问题，所以我决定重新开始构建步骤。

我的问题是，有没有办法解决这个"；不支持开箱即用ES模块导入的第三方库"；？也许只要我做一点工作，我就可以绕过这一点，尝试在没有开发构建步骤的情况下完成一个小项目。

Answer 1

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

不幸的是没有，至少不总是这样。浏览器不可能原生地import非ES模块的内容。然而，如果您可以访问原始源代码，并且源代码本身是作为ES模块编写的(然后进行转换/捆绑)，那么有时您可以自己构建ES模块。

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