Socket.io-client 没有默认导出答案

【问题标题】：Socket.io-client no default exportSocket.io-client 没有默认导出
【发布时间】：2019-02-17 23:37:22
【问题描述】：

我目前正在从事聚合物 3 中的一个项目，其中一个组件需要导入 socket.io-client 但无论我尝试什么都无法让它工作。

我试过了：

import io from 'socket.io-client';

我得到了什么：

未捕获的语法错误：请求的模块 '../../node_modules/socket.io-client/lib/index.js' 不提供导出名为“默认”

同样如此：

import io from 'socket.io-client/dist/socket.io.js';

我得到了什么：

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

我也试过这个：

import * as io from 'socket.io-client'

我得到了什么：

ReferenceError: 要求未在 index.js:4 中定义

还有这个：

import * as io from 'socket.io-client/dist/socket.io.js'

我得到了什么：

TypeError：无法读取未定义的属性“缓冲区”

我后来查看了来自 socket.io-client 的代码，代码中似乎确实没有使用任何 es6 导出，这可以解释为什么它确实不起作用。

我觉得奇怪的是，导入语法甚至在他们的网站上列为受支持。我假设我可能使用了错误的构建或其他东西，但我不知道为什么会这样，因为我使用 "socket.io-client": "^2.1.1" 如果有人知道我做错了什么，我会很高兴听到。

【问题讨论】：

我遇到了同样的问题，但我找不到适合它的工作网络组件。

标签： javascript socket.io polymer es6-modules

【解决方案1】：

Polymer 需要使用 ES 模块 - 因为 socket.io-client 在 package.json (https://github.com/rollup/rollup/wiki/pkg.module) 中没有模块，Polymer 必须依赖使用 ES 模块编写的源代码。 Socket.io-client 两者都不提供。所以你只能在 index.html 或你的一个模板中导入它，或者使用另一个库（或者用 webpack / gulp 做一些疯狂的事情）......

index.html

<script src="node_modules/socket.io-client/dist/socket.io.js"></script>

webcomponents 导入后我已经导入了。

在组件中：

const socket = io(...);

有效。

【讨论】：

【解决方案2】：

试试这个

import * as socketIO from 'socket.io'

【讨论】：

【解决方案3】：

检查 socket-io-client 他们有这个所谓的“UniversalModuleDefinition”，在导入脚本时运行，你可以在这里看到它：

(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
else if(typeof define === 'function' && define.amd)
    define([], factory);
else if(typeof exports === 'object')
    exports["io"] = factory();
else
    root["io"] = factory();
})(this, function() {
    ... //does io setup factory presumably
}

问题

如果我们尝试使用 import './socket.io.js' 导入，（即我们只使用 vanilla js 而我们没有使用 webpack、amd 或 requirejs）那么 root 是未定义的。

一个解决方案

修改 socket-io 客户端 js 以检查这个未定义的根并将其设置为窗口，如下所示：

if(root === undefined){
    root = window;
}
root["io"] = factory();

然后您可以简单地执行import './socket.io.js'，您将在全局范围内拥有io()。

【讨论】：