如何使用 Systemsj 配置我的 index.html 以使用现有的包？

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

转译器试图解释我在我的一个源文件中以 /* ... */ 形式出现的评论，这导致了这个错误。尽管有省略评论的标志，但还是发生了这种情况。

Answer 2

您应该让 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>

如何使用 Systemsj 配置我的 index.html 以使用现有的包？

How do I configure my index.html with Systemsj to use an existing bundle?

javascript

aurelia

jspm

systemjs