既存 JS ファイルを Browserify 用に書き直す

以前書いた記事で Browserify の使い方とか Browserify でやりたい事が分かったと思う。

では実際に Browserify を使って今までに書いたコードを Browserify 用に書き直してみる。

といっても大したことはない。1つのオブジェクトなり関数にまとめるだけで良い。

例として、よくあるスムーススクロールのスクリプトを挙げる。

$(function(){
	$(".anchorlink").on('click', function(e){
		e.preventDefault();

		var href = $(this).attr("href");
		var speed = 500;
		var easing = 'swing';
		var target = $(href == "#" || href == "" ? 'html' : href);
		var animateParam = {
			scrollTop: target.offset().top
		}

		$("html, body").animate(animateParam, speed, easing);
	});
});

凄くjQuery的ですね。ではこれを Browserify で呼び出せるコードにしていきます。

呼び出す側

まずはBrowserify（というかcommonJS）の仕様にそった記述にしてみる。Browserify は呼び出す側は require() 関数の戻り値を変数として確保する。

var anchorLink = require('./anchorLink/anchorLink.js');

これは特に難しいことはない。素直にファイルを指定してあげれば良い。

ちなみにこの require 関数で呼び出す際、 node_modules 配下のライブラリはライブラリ名だけで呼び出せたりする。例えば、

npm install jquery --dev-save

で jQuery を node_modules にインストールしていれば、これで jQuery を呼び出すことが出来る

var $ = require('jquery');

bower のライブラリを同様の記述で呼び出すことも可能なんだけど今回は割愛。

呼び出される側

呼び出される側、すなわちライブラリ側は、そのファイルの何を外で使うかをそのライブラリ側に記述する必要がある。

// hello.js
var mod = {};
var unRequire = {
  name: 'none require' 
};
mod.say = function(){
  console.log('hello');
};
module.exports = mod;

この hello.js を呼び出すと、helloメソッドを使えるようになる。unRequire はexportsに入ってないので外から使う事は出来ない。

// app.js
var hello = require('./hello.js');
hello.say();
// 'hello'

とりあえず関数に突っ込む

module.exports に突っ込めば良いわけで、スムーススクロールの機能全てを1つの関数にしてやればとりあえずOK。

var anchorLink = function(){
	$(function(){
		$(".anchorlink").on('click', function(e){
			e.preventDefault();

			var href = $(this).attr("href");
			var speed = 500;
			var easing = 'swing';
			var target = $(href == "#" || href == "" ? 'html' : href);
			var animateParam = {
				scrollTop: target.offset().top
			}

			$("html, body").animate(animateParam, speed, easing);
		});
	});
}
module.exports = anchorLink;

これを呼び出し側で関数を呼び出してあげれば良い

// app.js
var anchorLink = require('./anchorLink.js');
anchorLink();

これでも良いっちゃ良いんだけど、これだとアニメーションスピードとかオフセット値とかの変更が出来ない。

なので改良してみる

var $ = require('jquery');

var anchorLink = function(opt){

	// option のデフォルト値を設定
	opt = opt || {};
	opt.speed = opt.speed || 500;
	opt.offset = opt.offset || 500;

	$(function(){
		$(".anchorlink").on('click', function(e){
			e.preventDefault();

			var href = $(this).attr("href");
			var speed = opt.speed;
			var easing = 'swing';
			var target = $(href == "#" || href == "" ? 'html' : href);
			var animateParam = {
				scrollTop: target.offset().top - opt.offset
			}

			$("html, body").animate(animateParam, speed, easing);
		});
	});
}
module.exports = anchorLink;

スピードとかを変更したい場合は呼び出し側でオプションを設定してあげれば良い

// app.js
var anchorLink = require('./anchorLink.js');
anchorLink({
	speed: 1000,
	offset: 80
});

とりあえず require はこれくらいの知識で使える事は使える気はする。色々もっとやれることあるだろとか思う事も多いコードではあるんだけども、まずは「こういう作り方すれば良い」の雰囲気を掴むことが大事かなぁと思うのでこんな感じで。

次：JavaScript - 自作ライブラリをrequreされてもそうでなくても使えるようにする - Qiita