browserify 笔记

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。
一种解决方法是使用UMD的方式，前端使用requirejs，同时兼容nodejs的情况,例如：

(function (window, factory) {
    if (typeod exports === 'object') {
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        define(factory);
    } else {
        window.eventUtil = factory();
    }
})(this, function () {
//module ...
})

npm install -g browserify”。安装完成之后可以在命令行使用 browserify 命令。browserify 命令运行时以一个 JavaScript 文件作为输入，通过分析文件中对于require方法的调用来递归查找所依赖的其他模块。把输入文件所依赖的所有模块文件打包成单个文件并输出。
如“browserify greet.js > bundle.js”把 greet.js 及其所依赖的模块文件打包成单个 bundle.js 文件。

命令
–outfile, -o: browserify日志打印到文件
–require, -r: 绑定模块名或文件，用逗号分隔
–entry, -e: 应用程序的入口
–ignore, -i: 省略输出
–external, -x: 从其他绑定引入文件
–transform, -t: 对上层文件进行转换
–command, -c: 对上层文件使用转换命令
–standalone -s: 生成一个UMB的绑定的接口，提供给其他模块使用。
–debug -d: 激活source maps调试文件
–help, -h: 显示帮助信息

一个例子

multiply.js: 乘法计算
square.js: 平方计算，依赖multiply.js
index.js: node启动程序，调用square.js
index.html: 用于显示的HTML网页

//新建文件：multiply.js
~ vi multiply.js
module.exports = function (a, b) {
    console.log("js:multiply");
    return a * b;
};
//新建文件：square.js
~ vi square.js
var multiply = require('./multiply');
module.exports = function (n) {
    console.log("js:square");
    return multiply(n, n);
};
//新建文件：index.js
~ vi index.js
var square = require('./square');
console.log("js:index");
console.log(square(125));

//在node环境中运行 ~ node index.js

//用browserify编译index.js文件到bundle.js  ~ browserify index.js > bundle.js


//用browserify编译multiply.js文件到bundle.js，作为模块

新建multiply.js
~ vi multiply.js
module.exports = function (a, b) {
    console.log("js:multiply");
    return a * b;
};
~ browserify -r ./multiply.js > bundle.js