ブラウザ上でモジュール管理ができるbrowserifyの使い方

スポンサーリンク
Pocket
LINEで送る

browserifyとは

browserify(ブラウザリファイ)とは以下のような役割があります。

・ブラウザ上でモジュール管理ができる。
・node.jsのモジュールも使える。
・複数のjsファイルを一つにまとめられる。
・依存関係を解決できる

browserifyはrequire(“ファイル名”)で他のjsファイルを読み込むことができます。

wizard

 

使ってみる

まずbrowserifyをインストールします。

//インストールする
npm install -g browserify

http://browserify.org/

今回はカウントアップをjsで作っていきたいと思います。

main.js

//ファイル読み込み
var counter = require('./counter');
setInterval(counter, 100);

counter.js

var count = 0;
  function countUp(){
   count = count + 1;
   var el = document.getElementById('content');
   el.innerText = count;
  }
module.exports = countUp;

カウントアップし画面に表示する処理です。
module.exportsに外部参照したい関数、今回はcountUpを代入します。

スポンサーリンク

上記の2ファイルを作成したら以下のbrowserifyコマンドを実行します

browserify main.js -o bundle.js

これでbundle.jsが作成されます。

bundle.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var count = 0;
	function countUp(){
		count = count + 1;
		var el = document.getElementById('content');
		el.innerText = count;
	}

module.exports = countUp;

},{}],2:[function(require,module,exports){
var counter = require('./counter');

setInterval(counter, 100)

},{"./counter":1}]},{},[2]);

わけのわからない記述の下にmain.jsとcounter.jsのコードが記述されています。
あとはこのbundle.js一つをhtmlファイルに読み込むだけでカウントアップの処理が実行できます。