読者です 読者をやめる 読者になる 読者になる

かえるの井戸端雑記

開発日誌的な記事だったり備忘録だったり。まとめ記事と言うよりは、七転八倒の様子を小説みたいに読んで眺めてもらえればと。

Angular2を使ってみる 2. 環境構築とexample

環境構築

とりあえずnodebrewで node v6.10.1はいれてある状態。筆者、nodeが必要なのかどうかすら知らないところからのstartである(ひどい

ここから以下のpageに沿って進めてみるだけの記事。

www.buildinsider.net

Install

と思ったらそんなことはなかったんだぜ……。

最初のpageはいきなり読み飛ばした。nodeの説明とかそこまで求めてない。command listだけほしい。僕に入力するcommandを教えてくれ、と思いながら記事を読み終えてしまった。これではなかった……。

qiita.com

こちらのpageはどうだろう。いける気がする。npm init -yして、と。

commandの実行

npm init -y
npm i -S @angular/{core,common,compiler,platform-browser,platform-browser-dynamic} rxjs@5.0.0-beta.12 zone.js@0.6.21 core-js
npm i -D typescript webpack

commandは滞りなく成功。

reactの方でwebpackを使うからbrowserifyでなくwebpackをいれてみた。

こういう素直でないことをするからあとで後悔する羽目になるということは知ってる。まあいいか。後悔したときは調べればいい。

あれ。install終わり?

その他fileの修正

んなことはなかった。ちゃんとpageを読もう

scriptsのところを編集、と。tsconfig.jsonも作成。compileに使うfile一覧だったりを定義しているよう。

fileをざかざか作っていって……と、tsというのがtype scriptの拡張しっぽいな。

あ。emacsにmodeがない。

emacsのtype script support

横道にそれている気がするけどまあいいか。

web-modeでsupportしてないかな。

web-mode.org

compatibility with *.tsx files (TypeScript JSX)

しているような、していないような。まあこの際だからちゃんと入れてみよう。

typescript-modeなるものがあったのでinstall。

setupにもどる

とりあえず提示されているとおりにsourceを貼り付けて実行。

% npm run build

> angular2@1.0.0 build /Users/whiteblind/Dropbox/develop/repositories/angular2
> npm run tsc && npm run webpack


> angular2@1.0.0 tsc /Users/whiteblind/Dropbox/develop/repositories/angular2
> tsc -p .


> angular2@1.0.0 webpack /Users/whiteblind/Dropbox/develop/repositories/angular2
> webpack ./index.js --output-filename ./bundle.js

Hash: 567283f2d232e2284759
Version: webpack 2.3.2
Time: 2508ms
      Asset     Size  Chunks                    Chunk Names
./bundle.js  2.13 MB       0  [emitted]  [big]  main
  [13] ./~/core-js/modules/_core.js 117 bytes {0} [built]
  [34] ./~/@angular/core/@angular/core.es5.js 461 kB {0} [built]
  [97] (webpack)/buildin/global.js 509 bytes {0} [built]
  [98] ./~/@angular/common/@angular/common.es5.js 131 kB {0} [built]
 [100] ./~/@angular/platform-browser/@angular/platform-browser.es5.js 142 kB {0} [built]
 [125] ./~/core-js/modules/core.is-iterable.js 317 bytes {0} [built]
 [136] ./app.module.js 1.32 kB {0} [built]
 [137] ./~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 6.09 kB {0} [built]
 [138] ./~/core-js/index.js 639 bytes {0} [built]
 [139] ./~/zone.js/dist/zone.js 53.6 kB {0} [built]
 [140] ./app.component.js 986 bytes {0} [built]
 [141] ./hello-world.component.js 1.03 kB {0} [built]
 [142] ./index.js 343 bytes {0} [built]
 [159] ./~/core-js/modules/core.string.unescape-html.js 308 bytes {0} [built]
 [330] ./~/core-js/shim.js 7.38 kB {0} [built]
    + 338 hidden modules

WARNING in ./~/@angular/core/@angular/core.es5.js
5870:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/@angular/core.es5.js
5886:15-102 Critical dependency: the request of a dependency is an expression

通った気がする。warningは上がってるけど。

index.htmlをbrowserで開けばちゃんと描画されたのでたぶんこれでよし。

で、次に何をすればいいのか

言われるがままに実行しただけなので次は中身の理解をしよう。今回参考にしたpageにちゃんと解説もあるので読み込めばいいと思われ。

その次に何をするかはあとで考える。思いつかなかったら一度凍結と言うことで。

せっかくなので

Makefileを作ってshortcutできるようにしとく。

ついでにgitにupload。

github.com