Question

我正在尝试关注如何使用Spring的{{3}} websockets教程。我使用webpack捆绑我的代码，babel将其转换为ES6。我正在尝试使用正常的sockjs语句提取import。

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上运行。

我有2个问题。

首先，如何使用stompjs语句将import/require放入浏览器端代码？

其次，在教程中，他们可以将stompjs放在HEAD中并且它不会在浏览器中爆炸，但是当我运行＆＃34;相同＆＃34;代码通过webpack？

Answer 1

似乎不再开发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 2

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

然后你可以用

导入它

import SockJS from 'sockjs-client'

我的webpack.config.js包含库'sockjs-client'。另外，我添加了以下conf，以便忽略丢失的net模块。

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

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

Answer 3

安装'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 4

在离子 6 Angular 12 中

安装

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

npm i --save-dev @types/sockjs-client @types.stompjs
导入使用

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

为了解决“global”的问题，我必须将以下内容添加到 index.html

<script type="application/javascript"> var global = window; </script>

Answer 5

要在浏览器中使用stompj，只需打开文件your_path/node_modules/stompjs/index.js，就这样注释：

var Stomp = require('./lib/stomp.js');
// var StompNode = require('./lib/stomp-node.js');

module.exports = Stomp.Stomp;
// module.exports.overTCP = StompNode.overTCP;
// module.exports.overWS = StompNode.overWS;

我们如何在浏览器中导入stompjs？或者类似stompjs的东西？

5 个答案: