如何使用jspm和systemjs加载Emberjs 2.0

时间:2015-08-14 08:18:28

标签: javascript ember.js jspm systemjs

我尝试使用Ember 2.0并拥有下一个文件 config.js

System.config({
  "baseURL": "/static/js",
  "transpiler": "traceur",
  "paths": {
    "*": "*.js",
    "github:*": "jspm_packages/github/*.js"
  }
});

System.config({
  "map": {
    "ember": "github:components/ember@2.0.0",
    "traceur": "github:jmcriffey/bower-traceur@0.0.88",
    "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.88",
    "github:components/ember@2.0.0": {
      "jquery": "github:components/jquery@2.1.4",
      "handlebars": "github:components/handlebars@1.3.0"
    }
  }
});

app.js

import Ember from "ember";
let App = Ember.Application.create({
    LOG_TRANSITIONS: true,
    LOG_TRANSITIONS_INTERNAL: true,
});

和index.html

<script src="{% static "js/jspm_packages/system.js" %}"></script>
<script src="{% static "js/config.js" %}"></script>
<script>
    System.import('app');
</script>

aftre load我有下一个错误

Uncaught (in promise) Error: Cannot read property 'Ember' of undefined
    Error loading http://localhost:9090/static/js/app.js
    at http://localhost:9090/static/js/jspm_packages/github/components/ember@2.0.0/ember.js!transpiled:16:38
    at http://localhost:9090/static/js/jspm_packages/github/components/ember@2.0.0/ember.js!transpiled:97:11
    at execute (http://localhost:9090/static/js/jspm_packages/github/components/ember@2.0.0/ember.js!transpiled:25603:9)
    at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20821)
    at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20756)
    at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20756)
    at Object.Promise.all.then.execute (http://localhost:9090/static/js/jspm_packages/system.js:4:23421)
    at b (http://localhost:9090/static/js/jspm_packages/system.js:4:7874)
    at S (http://localhost:9090/static/js/jspm_packages/system.js:4:8253)
    at p (http://localhost:9090/static/js/jspm_packages/system.js:4:6131)

如果没有systemjs和jspm的加载脚本始终有效。但是想使用jspm和systemjs :) 在我使用ember 1.13和配置工作之前。我认为配置jquery的问题

1 个答案:

答案 0 :(得分:1)

看起来Ember的包并不总是与jspm兼容。我总是在SELECT <alias_name> FROM <EntityClass> <alias_name>; 中使用以下覆盖:

package.json

它规定jspm只安装Ember的prod和调试版本,并正确描述所有依赖项和导出。如果您使用它,则需要在将其添加到package.json后再次运行"jspm": { "overrides": { "github:components/ember@2.0.0": { "main": "ember.debug", "files": [ "ember.prod.js", "ember.debug.js" ], "dependencies": { "jquery": "github:components/jquery@^2.1.3" }, "shim": { "ember.prod": { "deps": [ "jquery" ], "exports": "Ember" }, "ember.debug": { "deps": [ "jquery" ], "exports": "Ember" } } } } }

您可能会遇到htmlbars模板的其他问题。我有一个插件可以解决这个问题:https://github.com/n-fuse/plugin-ember-hbs

jspm install

应该允许导入hbs模板,而无需在依赖项中添加编译器。

另见我创建的初学者项目:https://github.com/OrKoN/jspm-ember-playground