ブラウザでストンプをインポートするにはどうすればよいですか？あるいはストンプスのようなもの？

Question

websocketsの使い方についてはthisSpringのチュートリアルに従います。私はwebpackを使ってコードを束ね、babelをES6に変換しています。私はsockjsを通常のimportの文で引っ張っています。

import SockJS from 'sockjs' 

しかしときwebpack実行、私はNode上で実行されることを期待している

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 

主な理由は、不足しているモジュールのエラーが発生します。

私には2つの質問があります。

まず、どのように私はimport/requireステートメントを使用して、私のブラウザ側のコードにstompjsを得るのですか？

第二に、どのようにチュートリアルで来て、彼らはHEADでstompjsをドロップすることができ、それがブラウザに爆破されませんが、私はwebpackを通じて「同じ」のコードを実行したときにそれはありませんか？

Answer 1

"sockjs-client": "^1.0.3"をpackage.jsonにインポートする必要があります。

その後、あなたは私のwebpack.config.jsライブラリ'sockjs-client'が含まれてい

import SockJS from 'sockjs-client' 

でそれをインポートすることができます。 さらに、紛失したnetモジュールを無視するために、次のconfを追加しました。

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

出典：https://github.com/hapijs/joi/issues/665#issuecomment-113713020

Answer 2

このようにそれをコメントし、ブラウザ、ちょうど開いているファイルyour_path/node_modules/stompjs/index.jsでstompjsを使用するには：

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; 

Answer 3

春のドキュメントで参照stompjsライブラリはもはや開発されたものと思いませんhttps://github.com/stomp-js/stomp-websocket

：しかし、維持及びここにあり、あなたのプロジェクトに追加する方法についての指示をされたフォークがあります

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

あなたに：

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

は、その後、あなたのアプリにインポート：

は、ここで私は、この問題を解決し、春のバックエンドでWebSocketをと反応してアプリで働いて物事を取得するために使用されるステップですSpringのドキュメントのフロントエンドコードを正常に使用できるはずです。