Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

browserifyでjQueryのプラグインを使用する方法

gulpでbrowserifyを使う際に、jQueryのプラグインをどうやって$にsetしようかなということを長い間なやんでいました。$をglobalにsetするのも気がひけるのでどうにか、ローカルだけで解決できないかと色々なjQueryのプラグインのソースをみたりした結果、下記の方法が一番しっくり来ましたので今回紹介します。

package.json

gulp-browserfiyおよび、jquery-browserifyをnpm installでダウンロードします。

{
	"name": "gulpfile_generator",
	"version": "1.1.0",
	"description": "This is a genarator for gulpfile and package.json",
	"author": "steelydylan",
	"url": "http://horicdesign.com",
	"license": "MIT License",
	"keywords": "gulp",
	"devDependencies":{
		"gulp": "*",
		"gulp-plumber": "*",
		"gulp-rename": "*",
		"gulp-browserify": "*",
		"gulp-uglify": "*",
		"gulp-concat": "*",
		"gulp-notify": "*",
               "jquery-browserify": "*"
	}
}

gulpfile.js

.pipe(browserify({jquery:'jquery-browserify'}))この記述により、var $ = require("jquery-browserify");できるようになります。

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
gulp.task('js',function(){
	gulp.src(['components/timeline/js/src/timeline.js'])
		.pipe(plumber({
			handleError: function (err) {
				console.log(err);
				this.emit('end');
			}
		}))
  		.pipe(browserify({jquery:'jquery-browserify'}))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(uglify())
		.pipe(gulp.dest('components/timeline/js/dist'))
  		.pipe(notify('js task finished'));
});

jQuery Plugin

今回の記事の肝はプラグイン側にあります。下のようなテンプレートにすることで、main.jsでプラグインをrequireして、呼び出す事が可能になります。

(function (factory) {
    if (typeof module === 'object' && module.exports){
        module.exports = factory;
    }else{
        factory(jQuery);
    }
}(function($){
	$.fn.autoAlign = function(opt){
            //普段通りjQueryに対する拡張内容を記述
        }
}));

main.js

先ほどのプラグインをvar autoAlign = require('./autoAlign.js');のようにして、呼び出し、autoAlign($)とすることで、console.log($.fn.autoAlign);としたときにちゃんと、$.fn.autoAlignに関数の内容がセットされているのが分かるかと思います。

(function(){
	var $ = require('jquery-browserify');
	var autoAlign = require('./autoAlign.js');
	autoAlign($);
        console.log($.fn.autoAlign);
})();

堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド