如何使用 jspm 和 systemjs 加载 Emberjs 2.0

Question

我正在尝试使用 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>

加载后出现下一个错误

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

Answer 1

看起来 Ember 的包并不总是与 jspm 兼容。我总是在 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"
        }
      }
    }
  }
}

它指示 jspm 仅安装 Ember 的生产和调试版本，并正确描述所有依赖项和导出。如果您使用它，您需要在将它添加到您的package.json后再次运行jspm install。

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

jspm install hbs=github:n-fuse/plugin-ember-hbs@2.0.0

应该允许导入hbs模板w/o需要在依赖项中添加编译器。

另请参阅我创建的入门项目：https://github.com/OrKoN/jspm-ember-playground

如何使用 jspm 和 systemjs 加载 Emberjs 2.0

How load Emberjs 2.0 with jspm and systemjs

javascript

ember.js

jspm

systemjs