TypeScript Sampleをやってみるその２

## はじめに
Node.jsやnpmをブラウザで使用できるように依存関係を解決してくれるbrowserify(ブラウザリファイ)のサンプルを試した備忘録を投稿します。

## 前提
* [Visual Studio Code](https://code.visualstudio.com/download)がインストール済み
* [Node.js/npm](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)がインストール済み
* gitから[Sampleをダウンロードして](https://github.com/Microsoft/TypeScriptSamples/archive/master.zip)任意のディレクトリに解凍済み
* View In BrowserをMarketPlaceでインストール
* OSはWindows7/10を想定

## サンプル browserify
ブラウザへ現在の日付と時刻を出力するサンプル。

## ファイル構成
|パス|ファイル名|説明|
|:--|:--|:--| 
|.|.gitignore|git管理対象外設定ファイル|
|.|app.css|スタイルシート|
|.|bundle.js|app.jsよりbrowserifyにて生成されたJavaScript|
|.|index.html|ブラウザ出力用のhtml|
|.|app.js.map|app.jsのコンパイルにて作成されたmapファイル|
|.|package-lock.json|依存関係固定JSON|
|.|package.json|依存関係記述JSON|
|.|README.md|このサンプルの説明と使用方法|
|.|tsconfig.json|TypeScriptのコンパイルコンフィグファイル|
|src|app.js|app.tsのコンパイルにて作成されたJavaScrip|
|src|app.js.map|app.tsのコンパイルにて作成されたmapファイル|
|src|app.ts|timeReporterを実行するTypeScript|
|src|node.d.ts|osとutilモジュール定義のTypeScript|
|src|timeReporter.js|timeReporter.tsのコンパイルにて作成されたJavaScrip|
|src|timeReporter.js.map|timeReporter.tsのコンパイルにて作成されたmapファイル|
|src|timeReporter.ts|ブラウザへ日付と時刻を出力するTypeScript|

## クラス図とフローチャート
![TS_006.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/a86e7726-29bd-b9f4-3ec0-b93c6d24813c.jpeg)
![TS_007.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/0f3aeebf-dcc2-f97a-0f71-6d8a89d2fb53.jpeg)

## 実行
```
cd ./browserify
npm install -g browserify
npm install
npm run tsc
npm run browserify
npm run listen
```
index.htmlをエディターで表示後<kbd>Ctrl+F1</kbd>
※1 index.htmlを起動するためにはView In BrowserをMarketPlaceからインストール
※2 停止は<kbd>Ctrl+c</kbd>
※3 npm run xxxx のコマンドはpakege.jsonのscriptsに定義、tsc～listenまで一括は
　　npm run allで実行
```pakege.json抜粋
 "scripts": {
        "tsc": "node node_modules/typescript/lib/tsc.js",
        "browserify": "browserify src/app.js -o bundle.js -s app",
        "listen": "node node_modules/http-server/bin/http-server",
        "all": "npm run tsc &&  npm run browserify && npm run listen"
    }
```

## 結果
![TS_008.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/d18f82e0-f8a9-f2c6-1c8c-6dafe00a0000.jpeg)

## ポイント
app,js からbrowserifyを用いてbundle.jsを作成し、これをrequire.min.jsで実行させています。
app.jsを実行させるために必要なモジュールをnode.jsのモジュール群からバンドルしてこのbundle.jsにアウトプットします。browserifyは[モジュールバンドラ](https://qiita.com/soarflat/items/28bf799f7e0335b68186)といいます。

index.htmlにコーディングされている15行目のrequireで"bundle"をロードして依存関係解決後、app.jsを実行させています。

```index.html抜粋
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.min.js"></script>
</head>
<body>
    <h1>Browserify/TypeScript sample</h1>
    <div id="content"></div>
    <script>
    require(["bundle"], function(app) {
        var element = document.getElementById("content");
        app.start(function(s) { element.innerText = s; } );
    });
    </script>
```

## ノート
browserifyの基本構造をメモしておきます。
app.jsの依存関係を解決するため、require.min.jsからbundle.jsをロードします。
![TS_009.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/a8489842-e3d7-7a81-6772-23ae1f497289.jpeg)

## まとめ
browserifyの基本構造を見てわかるように、timeReporter.jsのソースを独自のソースで置き換えることで、そっくりこの構造をパクれることがわかります。テンプレート化して色々応用が利きそうです。

以上、おそまつ