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='/images/loading.gif' data-original="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-devnpm install gulp-sourcemaps --save-devnpm install browserify --save-devnpm install vinyl-source-stream --save-devnpm install vinyl-buffer --save-dev

vinyl-source-stream：用于将browserify的bundle()的输出转换为gulp可用的vinyl（一种虚拟文件格式）流。

vinyl-buffer：用于将vinyl流转化为buffered vinyl文件（gulp-sourcemaps及大部分Gulp插件都需要这种格式）

编译运行：