Socket.io-client 沒有默認導出

Question

我目前正在開發一個聚合物 3 項目，其中一個組件需要導入 socket.io-client，但無論我嘗試什么，我都無法讓它工作。

我試過了：

import io from 'socket.io-client';

我得到什么：

未捕獲的語法錯誤：請求的模塊“../../node_modules/socket.io-client/lib/index.js”不提供名為“default”的導出

同樣的：

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'

我得到什么：

參考錯誤：在 index.js:4 中未定義要求

和這個：

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

我得到什么：

類型錯誤：無法讀取未定義的屬性“緩沖區”

后來我查看了 socket.io-client 中的代碼，代碼中似乎沒有使用任何 es6 導出，這可以解釋為什么它確實不起作用。

我覺得奇怪的是，導入語法甚至列在他們的網站上作為支持。 我假設我可能使用了錯誤的構建或其他東西，但我不知道為什么會這樣，因為我使用"socket.io-client": "^2.1.1"如果有人知道我做錯了什么我'很高興聽到。

Answer 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 做一些瘋狂的事情）......

索引.html

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

我在 webcomponents 導入后導入了它。

在一個組件中：

const socket = io(...);

作品。

Answer 2

試試這個

 import * as socketIO from 'socket.io'

Answer 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() 。