LoginSignup
7
10

More than 5 years have passed since last update.

browserify と watchify で複数ファイルを個別にbundleする方法。たぶん最小構成のはず。

Last updated at Posted at 2016-09-29

今更ながら。
同じようなことをするやり方は様々あると思うが、なるべくnode moduleはインストールしたくないし、できればgulp-watchifyより、本家のwatchifyの方が何となく良いんじゃないか?とか、よくわかっていないなりにここまでたどり着いたので、その方法をメモ。

やりたいこと

フォルダ構成
/src/js
├── module
│    ├── _nav.js
│    ├── _slide.js
│    └── _calc.js
│ 
├── top.js
└── page.js

サイト内で共通のものはモジュールに。
サイト内の各ページ単位で、使いたいモジュールだけをrequireしたい。

この例で言えば、
top.jsは、_nav.js_slide.jsを。
page.jsは、_nav.js_calc.jsをそれぞれrequireできるようにしたい。

出力結果
dist/js
├── top.js     //_nav.jsと_slide.jsをrequire
└── page.js  //_nav.jsと_calc.jsをrequire

なんでそんなことするの?

複数人で開発していると、誰がどこを触って、いつ間にか何かが追加されたり、問題が起きたり。その問題範囲を明確にするために良いのかなー、どうなのかなーで考えていました。

この例で言えば、
私が作ったのはtop.jsです。page.jsは、作ってないからそんなの知りません!
って言えたらいいな。

最低限必要なmoduleはたったの4つ

  • gulp
  • browserify
  • watchify
  • vinyl-source-stream

gulpfile.js

gulpfile.js
'use strict';

/**************************************************
 * modules laod
 *************************************************/
//gulp
var gulp            = require('gulp');

//browserify module
var browserify      = require('browserify');
var watchify        = require('watchify');
var source          = require('vinyl-source-stream');

/**************************************************
 * path
 *************************************************/
var paths = {
    src : './src/js/',
    dist : './dist/js/',
    files : ['top.js', 'page.js']
}

/**************************************************
 * tasks
 *************************************************/
//browserify and watchify
gulp.task('bundle', function(){
    paths.files.forEach(function(entryPoint){
        // bundle option
        var bundler = watchify(
            browserify({
                cache: {}, //watchifyの差分ビルドを有効化
                entries:[paths.src + entryPoint],
                debug: true,
                packageCache: {} //watchifyの差分ビルドを有効化
            })
        );
        //bundle function
        function bundled(){
            return bundler
                .bundle()
                .pipe(source(entryPoint))
                .pipe(gulp.dest(paths.dist));
        }
        bundler.on('update', bundled);
        bundler.on('log', function(message){console.log(message)});
        return bundled();
    })
});

サンプルコード

module/_nav.js
function nav() {
    console.log("nav.js");
}

module.exports = nav;
module/_slide.js
function slide() {
    console.log("slide.js");
}

module.exports = slide;
top.js
var nav = require('./module/_nav');
var slide = require('./module/_slide');
出力結果
(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){
function nav() {
    console.log("nav.js");
}

module.exports = nav;

},{}],2:[function(require,module,exports){
function slide() {
    console.log("slide.js");
}

module.exports = slide;

},{}],3:[function(require,module,exports){
var nav = require('./module/_nav');
var slide = require('./module/_slide');

},{"./module/_nav":1,"./module/_slide":2}]},{},[3])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJzcmMvanMvbW9kdWxlL19uYXYuanMiLCJzcmMvanMvbW9kdWxlL19zbGlkZS5qcyIsInNyYy9qcy90b3AuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUNBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FDTEE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ0xBO0FBQ0E7QUFDQSIsImZpbGUiOiJnZW5lcmF0ZWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiKGZ1bmN0aW9uIGUodCxuLHIpe2Z1bmN0aW9uIHMobyx1KXtpZighbltvXSl7aWYoIXRbb10pe3ZhciBhPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7aWYoIXUmJmEpcmV0dXJuIGEobywhMCk7aWYoaSlyZXR1cm4gaShvLCEwKTt2YXIgZj1uZXcgRXJyb3IoXCJDYW5ub3QgZmluZCBtb2R1bGUgJ1wiK28rXCInXCIpO3Rocm93IGYuY29kZT1cIk1PRFVMRV9OT1RfRk9VTkRcIixmfXZhciBsPW5bb109e2V4cG9ydHM6e319O3Rbb11bMF0uY2FsbChsLmV4cG9ydHMsZnVuY3Rpb24oZSl7dmFyIG49dFtvXVsxXVtlXTtyZXR1cm4gcyhuP246ZSl9LGwsbC5leHBvcnRzLGUsdCxuLHIpfXJldHVybiBuW29dLmV4cG9ydHN9dmFyIGk9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtmb3IodmFyIG89MDtvPHIubGVuZ3RoO28rKylzKHJbb10pO3JldHVybiBzfSkiLCJmdW5jdGlvbiBuYXYoKSB7XG4gICAgY29uc29sZS5sb2coXCJuYXYuanNcIik7XG59XG5cbm1vZHVsZS5leHBvcnRzID0gbmF2O1xuIiwiZnVuY3Rpb24gc2xpZGUoKSB7XG4gICAgY29uc29sZS5sb2coXCJzbGlkZS5qc1wiKTtcbn1cblxubW9kdWxlLmV4cG9ydHMgPSBzbGlkZTtcbiIsInZhciBuYXYgPSByZXF1aXJlKCcuL21vZHVsZS9fbmF2Jyk7XG52YXIgc2xpZGUgPSByZXF1aXJlKCcuL21vZHVsZS9fc2xpZGUnKTtcbiJdfQ==

source-mapは?minifyは?

どちらもvinyl-bufferのmoduleをインストールしないといけない。
まぁ必要であれば!

参考

http://2inc.org/blog/2015/05/13/4818/
http://takahashifumiki.com/web/programing/3512/
http://qiita.com/DJ_Middle/items/3e533922078914285268

7
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
10