はじめに
Node.jsやnpmをブラウザで使用できるように依存関係を解決してくれるbrowserify(ブラウザリファイ)のサンプルを試した備忘録を投稿します。
前提
- Visual Studio Codeがインストール済み
- Node.js/npmがインストール済み
- gitからSampleをダウンロードして任意のディレクトリに解凍済み
- 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 |
クラス図とフローチャート
実行
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"
}
結果
ポイント
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をロードします。
まとめ
browserifyの基本構造を見てわかるように、timeReporter.jsのソースを独自のソースで置き換えることで、そっくりこの構造をパクれることがわかります。テンプレート化して色々応用が利きそうです。
以上、おそまつ