Question

我正在拼命尝试在Ember CLI中通过Bower包含SockJS。我尽可能地跟踪文档。这些步骤似乎几乎可行：

将"sockjs-client": "0.3.4"添加到bower.json
跑bower install
将以下内容添加到Brocfile.js

app.import（＆＃39; vendor / sockjs-client / lib / index.js＆＃39;，{ ＆＃39; sockjs＆＃39;：[ ＆＃39; sockjs＆＃39; ] }）;
将import { SockJS as SockJS } from 'sockjs';添加到我的模块中。我曾尝试过import SockJS from 'sockjs';以及其他各种组合......

至少看起来编译和ember server运行没有错误。但是，只要我在浏览器中打开页面，就会收到以下错误：

Uncaught ReferenceError: SockJS is not defined

显示错误的已创建源代码如下所示：

SockJS = (function(){
              var _document = document;
              var _window = window;
              var utils = {};

<!-- include lib/reventtarget.js -->
<!-- include lib/simpleevent.js -->
<!-- include lib/eventemitter.js -->
<!-- include lib/utils.js -->
<!-- include lib/dom.js -->
<!-- include lib/dom2.js -->
<!-- include lib/sockjs.js -->
<!-- include lib/trans-websocket.js -->
<!-- include lib/trans-sender.js -->
<!-- include lib/trans-jsonp-receiver.js -->
<!-- include lib/trans-jsonp-polling.js -->
<!-- include lib/trans-xhr.js -->
<!-- include lib/trans-iframe.js -->
<!-- include lib/trans-iframe-within.js -->
<!-- include lib/info.js -->
<!-- include lib/trans-iframe-eventsource.js -->
<!-- include lib/trans-iframe-xhr-polling.js -->
<!-- include lib/trans-iframe-htmlfile.js -->
<!-- include lib/trans-polling.js -->
<!-- include lib/trans-receiver-eventsource.js -->
<!-- include lib/trans-receiver-htmlfile.js -->
<!-- include lib/trans-receiver-xhr.js -->
<!-- include lib/test-hooks.js -->
                  return SockJS;
          })();

将SockJS与Ember CLI包含在一起的正确方法是什么？

修改

经过一些试验和错误后，我从浏览器的角度进行了以下工作：

Brocoli.js：

app.import('vendor/bower-sockjs-client/sockjs.js', {
  'sockjs-client': ['sockjs-client']
});
module.exports = app.toTree();

bower.json：

  "dependencies": {
    "handlebars": "~1.3.0",
    "jquery": "^1.11.1",
    "qunit": "~1.12.0",
    "ember-qunit": "~0.1.5",
    "ember": "1.5.1",
    "ember-resolver": "~0.1.1",
    "loader": "stefanpenner/loader.js#1.0.0",
    "ember-cli-shims": "stefanpenner/ember-cli-shims#0.0.2",
    "ember-load-initializers": "stefanpenner/ember-load-initializers#0.0.2",
    "ember-qunit-notifications": "^0.0.1",
    "ember-cli-test-loader": "rjackson/ember-cli-test-loader#0.0.2",
    "bower-sockjs-client": "0.3.4"
  }

否导入模块内的任何内容。

这使得Ember CLI抱怨很多：'SockJS' is not defined.但它现在至少有效。我在做什么有什么问题，或者这是Ember CLI中的一个错误？

Answer 1

我知道你已经解决了这个问题。但这里有一个错误的解释。我也有问题，所以我想我会看到最新情况。

您通过bower“sockjs-client”下载的库不包含分发文件。你需要自己建立它。为此，您需要make命令。如果你是linux或mac，你已经拥有它了。如果是在Windows上，则需要下载cygwin或mingw

要构建sockjs，请转到终端中的vendor / sockjs-client /并执行命令

npm install
make build

这将生成2个文件sockjs.min.js和sockjs.js。

现在您可以将此文件包含在Brocfile.js

中

app.import('vendor/sockjs-client/sockjs.min.js');

现在SockJS应该可用作全局变量。您现在使用的包'bower-sockjs-client'只是一个共享dist文件的fork。如果您正在使用它，请确保它是最新的。

由于SockJS是全局的，因此您需要将其添加到jshintrc文件中。

{
  "predef": {
    "document": true,
    "window": true,
    "Demo1ENV": true,
    "SockJS": true
  }
}

为什么导入不起作用

您无法导入包的原因是因为SockJS对amd使用某种UMD语法。他们执行以下检查以查看它是否可以使用amd语法。

typeof define == "function" && define.amd

ember-cli使用最小的loader.js加载amd模块并且未设置define.amd，因此在上面的代码中它将被评估为false。即使您修改了loader.js文件，SockJS的amd定义也与ES6转换器不兼容。 ES6转换器会将要导出的模块视为“默认”键。

import sockjs from 'sockjs';  will become something like
var sockjs = _dependency_1['default'];
but SockJS is _dependency_1, _dependency_1['default'] will be undefined.

Answer 2

鉴于SockJS没有适当的模块加载支持，我只是将以下内容放入我的Brocfile中

app.import('bower_components/sockjs-client/dist/sockjs-1.0.0-beta.12.js');

然后在我的控制器顶部，我有

import Ember from 'ember';
let SockJS = window.SockJS;

Answer 3

我有类似的问题所以我为Ember开发了一个插件，添加了预期的sockjs语法等。

ember-sockjs

在Ember CLI中将SockJS导入为AMD

3 个答案: