browserifyについて、全く理解していなかったので勉強してみました。
長期間運用するとjavascriptの記述が増えて行き、管理が大変になってくるし、他人の書いた長い記述の中で目的の処理を探すのは大変。
そのjavascriptの記述を機能ごとに別ファイルに分割して管理する為にbrowserifyが便利。
ということらしいです。
導入すると何が嬉しいか
ざっくりというと以下2点かなと。
- Node.jsスタイルで書かれたコードをブラウザ上で動くものに変換することができる。
-
javascriptにはないモジュール機能が使えるようになる(require機能など)。
使いかた
まずはbrowserifyをグローバルインストール
$ npm install -g browserify
main.jsというファイルを用意し、以下のように記述します。
同階層にあるparts1.jsとparts2.jsをrequireで参照。
var parts1 = require('./parts1.js');
var parts2 = require('./parts2.js');
parts1(5);
parts2(5);
今回はconsole.logの機能とalertの機能を分割。
parts1.jsにはconsole.logの機能。
module.exports = function(num1) {
console.log(num1);
};
parts2.jsにはalertの機能。
module.exports = function(num2) {
alert(num2);
};
main.js
parts1.js
parts2.js
以上3つのファイルの準備ができたら同階層で以下のコマンドを打つ
$ browserify main.js -o app.js
すると、同階層にapp.jsが生成されます。
一行目にある記述はrequire機能を定義している箇所です。
(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 parts1 = require('./parts1.js');
var parts2 = require('./parts2.js');
parts1(5);
parts2(5);
},{"./parts1.js":2,"./parts2.js":3}],2:[function(require,module,exports){
module.exports = function(num1) {
console.log(num1);
};
},{}],3:[function(require,module,exports){
module.exports = function(num2) {
alert(num2);
};
},{}]},{},[1]);
ブラウザで確認する為に、生成されたapp.jsをhtmlから読み込む。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Browserify Sample</title>
<script src="./app.js"></script>
</head>
<body>
</body>
</html>
console.logとalertにそれぞれ「5」が出力されたと思います。
おわりに
かなり簡単でしたが、なんとなく概要は掴んでいただけたのではないかと思います。
このままだとコンパイルするたびにコマンドを打たなくてはならないのですが、変更を監視してくれるwatchifyなどもあります。
browserifyはwebpackやgulpやnpm-scriptsでも使えたり、やり方次第でcssの記述もjavascriptの中に含めることができるので、使いこなせばとてもファイル管理が楽になると思います。
大規模案件や長期間運用する前提でないとあまり使わないかもなと思いますが、いざというときの為に概要だけでも知っておいていいと思います。