如何將我的index.html與Systemsj配置為使用現有的包？

Question

我有一個小的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

Answer 1

您應該讓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>

Answer 2

編譯器試圖以/* ... */的形式解釋我在一個源文件中的注釋，這引起了此錯誤。 盡管有省略評論的標志，但這種情況仍在發生。

如何將我的index.html與Systemsj配置為使用現有的包？

問題描述

2 個解決方案

解決方案1
2 已采納 2015-08-24 19:38:05

解決方案2
0 2015-06-15 18:33:13

如何將我的index.html與Systemsj配置為使用現有的包？

問題描述

2 個解決方案

解決方案1 2 已采納 2015-08-24 19:38:05

解決方案2 0 2015-06-15 18:33:13

解決方案1
2 已采納 2015-08-24 19:38:05

解決方案2
0 2015-06-15 18:33:13