セットアップ済みの Aurelia は触ったことはあるけど、自分でセットアップしたことない。
英語もちんぷんかんぷんだけど、まあやれば分かるべーってことで、やってみる。(2017年10月16日時点)
環境
- OS X El Capitan 10.11.6
- npm v8.7.0
やること
やってみた
Configuring Your Environment
npm 使うから Node.js を入れておいてね、って内容。
上記の環境に書いた通り、既に入れているのでパス。
Setting up the Project Structure and Build
最新版をダウンロードして、その中から必要なものをアプリケーションのスケルトンにしてね、って内容かな。
今回は「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
という名称で置くことにした。
$ mv ~/Downloads/skeleton-navigation-1.1.2/skeleton-esnext-webpack ~/workspace/aurelia-webpack-setup
そしたら、そのディレクトリで npm install
すれば良いっぽい。
$ 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
まだスケルトン状態だけど、早速アプリを動かしてみる。
$ 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/ にアクセス。
動いた!
すっげー楽チン。
Running The Unit Tests
単体テストも動くらしい。以下を実行したら動いた。
$ npm test
見た感じ Karma を使ってるっぽいけど、使い方は分かんない。
Running The E2E Tests
Protractor を使った E2E テストもできるらしい。以下を実行したら動いた。
$ npm run e2e
これも使い方は分かんない。
Running E2E Tests Manually
E2E テストを手動実行もできるらしい。
よく分からないし、とりあえず「こんなのもできるよ!」って感じに書いてあるだけだからパス。
おわりに
とりあえず動くところまで、というだけならすげー楽チンでした。
テスト関連については別途知識がいるので、それはそれで勉強すれば良いかなー。