browserify初识

在浏览器环境无法识别下面四个变量module，exports，require，global，但是在node环境中有定义。

含有这几个变量的js文件需要用类似browserify或者webpack的打包工具进行打包成浏览器可以运行的js代码。

这里先简单介绍下browserify的用法：

1.全局安装browserify包：

cnpm install browserify -g

2.需要打包的代码main.js：

// main.js

var unique = require('uniq');

var ary = [1,2,2,3,4,3,5,6,5,7];

console.log(unique(ary));
console.log('hello');

3.在工程根目录局部安装模块uniq：

cnpm install uniq

4.打包main.js成bundle.js：

browserify main.js -o bundle.js

5.把bundle.js放到script标签中，即可运行main.js代码。

6.自定义模块test.js：

"use strict"

function show(){
	alert('test');
}

module.exports = show;

7.把main.js改写成如下：

// main.js

var show = require('./test.js');

show();

// cnpm install browserify -g
// cnpm install uniq
// browserify main.js -o bundle.js

8.运行browserify打包工具，生成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) {
    // main.js

    var show = require('./test.js');

    show();
    // cnpm install browserify -g
    // cnpm install uniq
    // browserify main.js -o bundle.js
  }, {
    "./test.js": 2
  }],
  2: [function(require, module, exports) {
    "use strict"

    function show() {
      alert('test');
    }

    module.exports = show;
  }, {}]
}, {}, [1]);

更多browserify用法，官方文档

阮一峰关于commonjs的原理博客