redwarrior’s diary

C#, ASP.NET, WEB, G*などの雑多な情報

Angular 2のビルド周りについて調査した

Angular2

以下の記事で入門して、公式チュートリアルの学習には、Plunker を使用していたので、手元で試していなかった。

npm i angular2してHello World!するところまで - Qiita

いざ、自作プログラムを作成しようと思った時に、色々とわからなかったので、調べたことをまとめた。

TypeScriptのコンパイル方法

tsファイルから、jsファイルへの変換（トランスパイルというらしい）には、tscコマンドの-pオプションで現在のディレクトリを指定する。

beta.6でtsconfigの書き方が変わったことによるエラーが出て、自分のミスと切り分けがつかず、少し悩んだ。targetに"es6"を設定することでエラーが出なくなった。

tsconfigのfilesは、エントリポイントを指定すると書いてあったので、boostrapメソッドを記述したファイルを指定した。 公式チュートリアルのフォルダ構成だと、app/main.ts になる。

jsファイルをBrowserifyで一つにまとめる

tscによって変換したjsファイルを一つにまとめる。とりあえずコマンドの引数にjsファイルを複数指定したら動作した！

でもtsファイルを作るたびに、指定を増やすなんてことはしたくないなあ～と思い、解決方法について調べた。

これはbrowserify-handbookというサイトに書いてあった。requireメソッドのツリーをたどって依存関係を構築してくれるらしいので、こちらもエントリポイントだけで良いみたい。

github.com

その結果、なんとか複数ソースファイルを使用したHello Worldが動作することを確認できた。

Httpサーバーで実行するにはどうするのか？とかリリースどうするのか？とかあるけど、とりあえず作成に入ろうと思う。

Angular 2 Router挑戦

Routerでつまずく。browserifyでやろうとすると壁があちこちにあるな。．．．．．．そうか！Routerを使う場合はサーバー上で実行しなければならないのか。

browserifyのサイトにあったbeefyを-gオプションでインストールして実行。beefyにbundle.jsを渡したら動いた。

ところが翌日に、昨日は動いたのに今日は動かないという現象が発生。buf.copyでエラーになる。リソースの読み込みに関するエラーのようだ。 そこでbudle.jsの代わりに、bundle.jsを読み込んでいるindex.htmlをbeefyに渡すようにしたらエラーが出なくなった。

Firefox, Chromeでの動作確認

今までEdgeで動作確認をしていたが、他の人に確認してもらうために、FirefoxやChromeで試してみると、動作しない！変換されたJSを見てみると、classという文字がある。つまり、ES6形式のJSになっていた。

そこで入門に使用した記事を再び見ると、beta.6対応版になっていた。それに従って、babelifyを使用すると、今度はbabelifyでエラー。presetsで指定したes2015が見つからないというので、babel-preset-es2015をインストール。

そうすると、FirefoxやChromeで動作するようになった。 index.htmlで指定していたxxxpolifill.jsも不要になった。

今後

チュートリアルに手を加えて、検索機能や保存ボタンを作ってみた辺りで、調査は一区切りとした。Angular2の開発が進んで、ng2-bootstrapとかIonic 2の情報が増えてきたら、また調べようと思います。

参考までにpackage.json、tsconfig.json、index.htmlの内容を残しておく。

package.json

{
  "name": "angular2-sample",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc": "tsc -p ./",
    "browserify": "browserify ./app/main.js -t babelify -o ./bundle.js",
    "beefy": "beefy ./index.html",
    "build": "npm run tsc && npm run browserify",
    "bs": "npm run tsc && npm run browserify && npm run beefy"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "typescript": "^1.7.5"
  },
  "dependencies": {
    "angular2": "^2.0.0-beta.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "^0.1.2",
    "rxjs": "^5.0.0-beta.0",
    "zone.js": "^0.5.14"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "noImplicitAny": true,
    "removeComments": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node"
  },
  "files": [
    "./app/main.ts"
  ]
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Angular 2 Sample</title>
</head>
<body>
  <my-app>Loading…</my-app>
  <script src="./bundle.js"></script>
</body>
</html>