JavaScript
Node.js
TypeScript
VSCode

TypeScript Sampleをやってみるその2

はじめに

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

前提

サンプル 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
TS_007.jpg

実行

cd ./browserify
npm install -g browserify
npm install
npm run tsc
npm run browserify
npm run listen

index.htmlをエディターで表示後Ctrl+F1
※1 index.htmlを起動するためにはView In BrowserをMarketPlaceからインストール
※2 停止はCtrl+c
※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

ポイント

app,js からbrowserifyを用いてbundle.jsを作成し、これをrequire.min.jsで実行させています。
app.jsを実行させるために必要なモジュールをnode.jsのモジュール群からバンドルしてこのbundle.jsにアウトプットします。browserifyはモジュールバンドラといいます。

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

まとめ

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

以上、おそまつ