Horic Design

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

CommonJSに対応していないjQuery Pluginを対応させるためのnpm moduleを作った

ほとんどのjQueryプラグインはCommonJSに対応していません。つまり、jQueryをグローバル空間に定義してやらないとプラグインをjQueryに適応できないようになっています。
そこで今回は、jQueryおよび、jQueryプラグインをrequireしてローカル関数内で拡張できる仕組みをbrowserifyのtransformを使って作ってみました。
ソースコードは下の方法でダウンロードできます。

npm install jquerify

使い方

gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');
var jquerify = require('jquerify');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');

gulp.task('js',function(){
	gulp.src(["./js/main.js"])
		.pipe(browserify({
			jquery:'jquery-browserify',
			transform: ['jquerify'],
		}))
		.pipe(gulp.dest("./js/dist"));
});

main.js

(function(){
	var $ = require("jquery-browserify");
	var autoAlign = require("./autoAlign.js");
	autoAlign($);
	$(window).load(function(){
		$(".js-autoHeight").autoAlign({
			columns:2,
			columnsTablet:[768,3],
			columnsDesktopSmall:[992,4]
		});
	});
})();

仕組み

やっていることは難しくなく、ただ、jQueryのプラグインのソースコードを事前に以下のフォーマットに変換(transform)したあとにbrowserifyを実行しているだけです。

(function (factory) {
    if (typeof module === 'object' && module.exports){
        module.exports = factory;
    }else{
        factory(jQuery);
    }
}(function(){
	//ここにソースコードが入ります。
}));

githubでソースコードも公開しています。



堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド