如何在浏览器中导入stompjs？或者像stompjs这样的东西？

Question

我正在尝试学习如何使用websockets的this Spring教程。我正在使用webpack捆绑我的代码，并使用babel将其从ES6转换。我正在尝试用一个普通的import语句来引入sockjs。

import SockJS from 'sockjs'

但是当webpack运行时，我得到了缺少模块的错误，

ERROR in ./~/stompjs/lib/stomp-node.js
Module not found: Error: Cannot resolve module 'net' in /Users/name/Developer/cubs-stack-4/cubs-webapp/node_modules/stompjs/lib
 @ ./~/stompjs/lib/stomp-node.js 14:8-22

ERROR in ./~/websocket/package.json
Module parse failed: /Users/name/Developer/cubs-stack-4/cubs-webapp/node_modules/websocket/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       "websocket@latest",
 @ ./~/websocket/lib/version.js 1:17-43

主要是因为它期望在Node上运行。

我有两个问题。

首先，如何使用import/require语句将stompjs添加到浏览器端代码中？

其次，为什么在本教程中，他们可以将stompjs放在HEAD中，并且它不会在浏览器中崩溃，但当我通过webpack运行“相同”的代码时，它会崩溃

Answer 1

安装'net‘依赖解决了我的问题

npm i sockjs-client --save
npm i stompjs --save
npm i net

然后像这样导入

import * as SockJS from 'sockjs-client';
import * as Stomp from 'stompjs';

Answer 2

看起来Spring文档中引用的stompjs库已经不再是开发的了，但是有一个fork是维护的，并且有关于如何将它添加到您的项目中的说明，可以在这里找到：https://github.com/stomp-js/stomp-websocket

以下是我用来解决这个问题并在Spring后端使用websockets的React应用程序中工作的步骤：

# Add sockjs and stompjs dependencies
npm install sockjs-client --save
npm install @stomp/stompjs --save

然后将其导入您的应用程序中：

import SockJS from "sockjs-client"
import Stomp from "@stomp/stompjs"

现在您应该能够成功地使用Spring文档中的前端代码了。

Answer 3

您必须在package.json中导入"sockjs-client": "^1.0.3"。

然后可以使用以下命令导入它

import SockJS from 'sockjs-client'

我的webpack.config.js包含库'sockjs-client'。另外，我添加了以下配置文件，以便忽略缺少的net模块。

node: {
  net: 'empty',
  tls: 'empty',
  dns: 'empty'
}

来源：https://github.com/hapijs/joi/issues/665#issuecomment-113713020