LoginSignup
0

More than 5 years have passed since last update.

Aurelia の Setup with Webpack をやってみる

Posted at

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

環境

  • OS X El Capitan 10.11.6
  • npm v8.7.0

やること

Setup with Webpack

やってみた

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」を選ぶことにする。

選んだスケルトンを任意のディレクトリに配置してアプリケーションとして扱えば良いみたい。
今回は ~/workspaceaurelia-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/ にアクセス。

20171016_172422.png

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

Running The Unit Tests

単体テストも動くらしい。以下を実行したら動いた。

$ npm test

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

Running The E2E Tests

Protractor を使った E2E テストもできるらしい。以下を実行したら動いた。

$ npm run e2e

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

Running E2E Tests Manually

E2E テストを手動実行もできるらしい。
よく分からないし、とりあえず「こんなのもできるよ!」って感じに書いてあるだけだからパス。

おわりに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0