Angular2を使ってみる 2. 環境構築とexample
環境構築
とりあえずnodebrewで node v6.10.1はいれてある状態。筆者、nodeが必要なのかどうかすら知らないところからのstartである（ひどい
ここから以下のpageに沿って進めてみるだけの記事。
Install
と思ったらそんなことはなかったんだぜ……。
最初のpageはいきなり読み飛ばした。nodeの説明とかそこまで求めてない。command listだけほしい。僕に入力するcommandを教えてくれ、と思いながら記事を読み終えてしまった。これではなかった……。
こちらの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してないかな。
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。
