如何使用 jspm 和 systemjs 加载 Emberjs 2.0
How load Emberjs 2.0 with jspm and 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>
加载后出现下一个错误
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
看起来 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
我正在尝试使用 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
看起来 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