browserify学习总结
前言
在未接触browserify，虽然我知道它是一个前端构建工具，但还是有几个疑问：
1. browserify出现的日期？
2. 能构建哪些文件？
3. 附加的browserify代码体积是多大？
4. 能生成多个输出文件吗？
5. 如何兼顾开发调试？
6. browserify vs webpack？
browserify
browserify可以让你使用类似于 node 的 require() 的方式来组织浏览器端的Javascript代码，通过预编译让前端Javascript可以直接使用 Node NPM 安装的一些库。
安装
npm install -g browserify
示例
module.js：
module.exports = 'It works from module.js.'
module2.js：
module.exports = 'It works from module2.js.'
这是 entry.js 的内容，像普通的 nodejs 程序那样使用 require() 加载库和文件：
entry.js：
var m = require('./module.js'); var m2 = require('./module2.js'); console.log(m, m2);
使用browserify编译：
$ browserify entry.js > bundle.js
编译后的文件：
(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 m = require('./module'); var m2 = require('./module2'); console.log(m, m2); },{"./module":2,"./module2":3}],2:[function(require,module,exports){ module.exports = 'It works from module.js.' },{}],3:[function(require,module,exports){ module.exports = 'It works from module2.js.' },{}]},{},[1]);
现在entry.js 需要的所有其它文件都会被编译进 bundle.js 中，包括很多层 require() 的情况也会一起被递归式的编译过来。
编译好的 js可以直接拿到浏览器使用
<script src="bundle.js"></script>
结合gulp
结合Gulp使用时，需要在工程里面添加package.json和安装一些node依赖。
示例：
gulpfile.js：
var gulp = require("gulp"); var browserify = require("browserify"); var sourcemaps = require("gulp-sourcemaps"); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); gulp.task("browserify", function () { var b = browserify({ entries: "./entry.js", debug: true /*告知browserify在运行同时生成内联sourcemap用于调试*/ }); return b.bundle() .pipe(source("bundle.js")) .pipe(buffer()) .pipe(sourcemaps.init({loadMaps: true})) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("./dist")); });
那就需要安装：
npm install gulp --save-dev npm install gulp-sourcemaps --save-dev npm install browserify --save-dev npm install vinyl-source-stream --save-dev npm install vinyl-buffer --save-dev
vinyl-source-stream：用于将browserify的bundle()的输出转换为gulp可用的vinyl（一种虚拟文件格式）流。
vinyl-buffer：用于将vinyl流转化为buffered vinyl文件（gulp-sourcemaps及大部分Gulp插件都需要这种格式）
编译运行：
gulp browserify
自问自答
1. browserify出现的日期？
在网上没有找到browserify开始出现的日期的说明，只是有Github上找到最初的版本是在2011/6/6。anywhere，这问题并不关键，也就不深究。
2. 能构建哪些文件？
如上面介绍，只能构建JavaScript文件。
3. 附加的browserify代码体积是多大？
文件合并后（编译后），browserify附加的代码的体积（不是业务代码）是不到1KB的。
4. 能生成多个输出文件吗？
严格上讲，单从命令使用，只能是一个输出文件。
5. 如何兼顾开发调试？
页面上运行时的js是编译后，所以要兼顾开发调试，那还是要用source map。
PS：不过必须部署到服务器才能看到source map文件。
browserify vs webpack
由于我用得不深，下面一些酌见：
1. 都是前端模块化的方案，都需要预编译。
2. browserify只干JavaScript，webpack啥都干（CSS、JavaScript、图片等）
3. browserify是轻量级的，webpack 整体解决、大而全的。
PS：webpack官网有对二者的使用方法进行对比：webpack for browserify users
总结
关于模块化的，无论是异步模块加载（AMD），还是browserify的预编译。关键不在于运行时是合并成一个文件，还是异步加载。关键是在于处理模块的依赖，使开发时候不需要关注模块之间的加载顺序、依赖关系，使用方式，只需关注自己当前模块的开发（不用管使用的模块在哪里，这模块又依赖了哪些模块）。
就类似于maven，提供了一个放置jar包，管理依赖关系，使得第三方库易于使用，最后也可做打包发布。
所以，无论是用RequireJS、SeaJS，还是grunt、gulp，或者browserify、webpack，最终都是为了模块开发，压缩合并只是一小部分。
附录：
示例代码：https://github.com/codingforme/code-learn/tree/master/browserify
参考文献
1. browserify【百度百科】
2. https://www.zhihu.com/question/37020798 【知乎】
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
