Aurelia の Setup with Webpack をやってみる

セットアップ済みの Aurelia  は触ったことはあるけど、自分でセットアップしたことない。
英語もちんぷんかんぷんだけど、まあやれば分かるべーってことで、やってみる。（2017年10月16日時点）

# 環境
- OS X El Capitan 10.11.6
- npm v8.7.0

# やること
[Setup with Webpack](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack)

# やってみた
## [Configuring Your Environment](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/1)
npm 使うから Node.js を入れておいてね、って内容。
上記の環境に書いた通り、既に入れているのでパス。

## [Setting up the Project Structure and Build](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/2)
最新版をダウンロードして、その中から必要なものをアプリケーションのスケルトンにしてね、って内容かな。
今回は「ESNext Skeletons」の Webpack を使えるやつにします。

### ダウンロード
「Download the Skeletons」ボタンをクリックしたら GitHub の Releases ページに飛んだ。
今回は https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 に飛んだので、今の最新版は v1.1.2 らしい。
zip でも tar.gz でもダウンロードすれば良いので、今回は zip をダウンロード。

### スケルトン選び
落としてきた zip を解凍して、中にある README.md を見る。
先述の通り、今回は TypeScript を使わないし Webpack を使いたいので「skeleton-esnext-webpack」を選ぶことにする。

選んだスケルトンを任意のディレクトリに配置してアプリケーションとして扱えば良いみたい。
今回は `~/workspace` に `aurelia-webpack-setup` という名称で置くことにした。

```console
$ mv ~/Downloads/skeleton-navigation-1.1.2/skeleton-esnext-webpack ~/workspace/aurelia-webpack-setup
```

そしたら、そのディレクトリで `npm install` すれば良いっぽい。

```console
$ cd ~/workspace/aurelia-webpack-setup
$ npm install

npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

...中略

added 1294 packages in 44.626s
```

いくつか WARN は出たけど、無事にインストール完了。

## [Running The App](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/3)
まだスケルトン状態だけど、早速アプリを動かしてみる。

```console
$ npm start

> aurelia-skeleton-navigation-webpack@1.1.2 start ~/workspace/aurelia-webpack-setup
> npm run server:dev


> aurelia-skeleton-navigation-webpack@1.1.2 server:dev ~/workspace/aurelia-webpack-setup
> cross-env NODE_ENV=development npm run webpack-dev-server -- --inline --progress --profile --watch


> aurelia-skeleton-navigation-webpack@1.1.2 webpack-dev-server ~/workspace/aurelia-webpack-setup
> cross-env BABEL_ENV=node ./node_modules/.bin/webpack-dev-server "--inline" "--progress" "--profile" "--watch"

keywords if/then/else require v5 option

Project is running at http://localhost:9000/

...中略

webpack: Compiled successfully.
```

少し待ったら `webpack: Compiled successfully.` って出力されたので、準備 OK みたい。
http://localhost:9000/ にアクセス。

![20171016_172422.png](https://qiita-image-store.s3.amazonaws.com/0/89904/49efa8e2-6319-f862-154d-8be46f6598da.png)

動いた！
すっげー楽チン。

## [Running The Unit Tests](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/4)
単体テストも動くらしい。以下を実行したら動いた。

```console
$ npm test
```

見た感じ Karma を使ってるっぽいけど、使い方は分かんない。

## [Running The E2E Tests](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/5)
Protractor を使った E2E テストもできるらしい。以下を実行したら動いた。

```console
$ npm run e2e
```

これも使い方は分かんない。

## [Running E2E Tests Manually](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/6)
E2E テストを手動実行もできるらしい。
よく分からないし、とりあえず「こんなのもできるよ！」って感じに書いてあるだけだからパス。

# おわりに
とりあえず動くところまで、というだけならすげー楽チンでした。
テスト関連については別途知識がいるので、それはそれで勉強すれば良いかなー。