我有一个小的TypeScript helloworld应用程序,该应用程序使用捆绑文件中的aurelia.io框架,并使用SystemJS进行配置。当我运行我的应用程序时,helloworld.ts
的编译后的打字稿版本会引发错误,内容为:
TypeError: define is not a function at System.register.execute
(http://localhost:9000/src/helloworld.js!eval:31:13) at t ...
在我看来,功能
define
是由SystemJS声明的,所以也许这是一个配置问题。该框架似乎可以很好地加载,但是我发现奇怪的是无法识别systemjs函数。这是我的项目层次结构和配置文件。我究竟做错了什么?
我的文件夹结构如下所示:
./jspm_packages/...
./scripts/aurelia/aulrelia-bundle.js
./src/main.ts
./src/main.js (compiled ts)
./src/app.ts
./src/app.js (compiled ts)
./src/helloworld.ts
./src/helloworld.js (compiled ts)
./index.html
./config.js
我已经安装了jspm,并按照提示创建了默认的config.js文件。我从默认更改的唯一选项是将babel用作转译器。
我的config.js看起来像这样:
System.config({
"baseURL": "/",
"transpiler": "babel",
"babelOptions": {
"optional": [
"runtime"
]
},
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js",
"npm:*": "jspm_packages/npm/*.js"
}
});
System.config({
"map": {
"babel": "npm:babel-core@5.5.6",
"babel-runtime": "npm:babel-runtime@5.5.6",
"core-js": "npm:core-js@0.9.15",
"github:jspm/nodelibs-process@0.1.1": {
"process": "npm:process@0.10.1"
},
"npm:babel-runtime@5.5.6": {
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:core-js@0.9.15": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"process": "github:jspm/nodelibs-process@0.1.1",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
}
}
});
我的index.html看起来像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/fontawesome/css/font-awesome.min.css">
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body aurelia-app>
<div class="splash">
<div class="message">Welcome...</div>
</div>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.config({
"paths": {
"*": "*.js"
}
});
//Project uses bundles
System.bundles["scripts/aurelia/aurelia-bundle"]=["aurelia-bootstrapper"];
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
我的
helloword.ts
看起来像这样:import {bindable} from 'aurelia-framework';
export class HelloWorld{
@bindable hello="Hello!";
}
完整错误:
TypeError: define is not a function at System.register.execute
(http://localhost:9000/src/helloworld.js!eval:31:13) at t
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:19798) at v
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:20180) at u
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:19856) at s
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:19737) at
http://localhost:9000/jspm_packages/es6-module-loader.js:7:22064 at O
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:7439)
at K
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:7071) at y.7.y.when
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:10745) at v.7.v.run
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:9781) at a.3.a._drain
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:1740)
at 3.a.drain
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:1394) at MutationObserver.b
(http://localhost:9000/jspm_packages/es6-module-loader.js:7:3302)(anonymous function) @ aurelia-bundle.js:16334run @ aurelia-bundle.js:1602(anonymous
function) @ aurelia-bundle.js:1613module.exports @ aurelia-bundle.js:2906queue.(anonymous function) @ aurelia-bundle.js:3416run @ aurelia-bundle.js:3404listner @ aurelia-bundle.js:3408
最佳答案
您应该让jspm
自动创建config.js
文件,并且不要手动对其进行修改。然后,您可以使用aurelia-cli根据通过jspm
下载的软件包(如下所示)自动创建捆绑软件:
aureliafile.js
var bundleConfig = {
js: {
"scripts/aurelia-bundle-latest": {
modules: [
'github:aurelia/*'
],
options: {
inject: true,
minify: true
}
}
}
};
这将自动修改
config.js
以包括捆绑软件所需的文件,并在运行aurelia bundle ---force
时在运行时在何处查找它们(强制作用是覆盖以前的捆绑软件)。之后,您的index.html
看起来像:Index.html
<body aurelia-app="path/to/main">
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>