如何在 angular 1.5/es6 和 webpack 中使用 stomp

Question

我正在努力将 stomp 添加到我的项目中。两个版本 jmesnil/stomp-websocket 或后续 forkJSteunou/webstomp-client.

我尝试正确导入：

import Stomp from 'stompjs';//or 'webstomp-client';
import SockJS from 'sockjs-client';

并像这样加载它：

angular.module('app', [
uiRouter, ngTranslate, ngTranslateStaticFilesLoader, ngResource, ngFilter,
uiBootstrap, Stomp, SockJS
])

但我收到以下错误（两个版本）：

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"VERSIONS":{"V1_0":"1.0","V1_1":"1.1","V1_2":"1.2"}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

（即使 webstomp.js 上面有 "function webpackUniversalModuleDefinition(root, factory) "，显然没有达到目的）

可以通过直接在使用的控制器上导入它 "wildly" 来绕过这个错误，但是所有业力测试都不是运行（错误是：错误: 找不到模块 "net")，即使 node: { net: 'empty', tls: 'empty', dns: 'empty' } 添加到 webpack.config.js.

在这一点上，我尝试的任何事情都感觉像是奇怪的黑魔法。

是否有 "constellation" 的 lib 版本、angular 包装器等已知可与我的设置一起正常工作 (angular 1.5 / es6 / webpack 1.14 / karma)？

Answer 1

不要将其添加为 angular 模块的依赖项。 Stomp 库不是 angular 模块。可能有网桥可用，但我认为没有必要。

要将 Stomp 与 Webpack 2 一起使用，只需将其放在您使用 Stomp 的文件的顶部，然后将其用作全局变量即可。

const Stomp = require("stompjs/lib/stomp.js").Stomp;

在你的 controller/service 里面：

Stomp.client(...);

编辑

此解决方案的单元测试会有点困难，因为您将无法轻松替换 "angular way" 的依赖项。要解决该问题，您可以在主模块文件中将其定义为常量，而不是使用 AngularJS.

提供的 DI

主模块文件

const Stomp = require("stompjs/lib/stomp.js").Stomp;

angular
    .module('app', [
        // dependencies
    ])
    .constant('Stomp', Stomp)
    // other controllers/services/etc.

Controller/Service

function MyController(Stomp) {

    Stomp.client(...);

}

如何在 angular 1.5/es6 和 webpack 中使用 stomp

How to use stomp with angular 1.5/es6 and webpack

stomp

websocket

angularjs

karma-runner

webpack