Help us understand the problem. What is going on with this article?

Aurelia の Setup with Webpack をやってみる

More than 1 year has passed since last update.

セットアップ済みの 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 テストを手動実行もできるらしい。
よく分からないし、とりあえず「こんなのもできるよ!」って感じに書いてあるだけだからパス。

おわりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした