Configuration Environment

Node.js

とりあえずnode.jsがインストールされていない場合は、しましょう。
またnpmが最新バージョンでない場合には、最新にしましょう。

Gulp

$ npm install -g gulp

jspm

$ npm install -g jspm

Set Up

$ npm install -g yo generator-aurelia
$ yo aurelia
---
$ yo aurelia
/Users/path/to/project
Download complete
Executing NPM install
Executing JSPM install
     Looking up npm:font-awesome
     Updating registry cache...
     Looking up github:aurelia/dependency-injection
     Looking up github:aurelia/http-client
     Looking up github:aurelia/animator-css
     Looking up github:aurelia/bootstrapper
     Looking up github:aurelia/framework
・
・
・

$ rm -rf index.html src

Creat HTML

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <link rel="stylesheet" type="text/css" href="jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
  </head>
  <body aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
     System.config({
       "paths": {
         "*": "dist/*.js"
       }
     });
   </script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

bodyタグの中で jspm_packages/system.jsを読んでいます。これはES6ベースのモジュール、つまりaureliaライブラリを読み込むためのファイルです。

次にローダーの設定ファイルである config.js を読んでいます。これはjspmコマンドを打つと自動で生成されます。

そして、その下では System.config が呼ばれています。JavaSciptコードがコンパイルされて生成されるパスをしていしています。

最後にaurelia-bootstrapperを読み込みます。

ちなみにaureliaはjspmともSystemJSとも結合していません。サポートしているだけです。なので、別のパッケージマネージャーやローダーと組み合わせることもできます。しかし、中の人的には、jspm/SystemJSがES6志向のソリューションとしてベストと考えている様です。

では、次回からページを作っていきます。

続きはこちら

[Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 2 環境構築