Browserify CommonJs

*

参考文章：Browserify：浏览器加载Node.js模块

随着JavaScript程序逐渐模块化，在ECMAScript 6推出官方的模块处理方案之前，有两种方案在实践中广泛采用：一种是AMD模块规范，针对模块的异步加载，主要用于浏览器端；另一种是CommonJS规范，针对模块的同步加载，主要用于服务器端，即node.js环境。

Browserify是一个node.js模块，主要用于改写现有的CommonJS模块，使得浏览器端也可以使用这些模块。使用下面的命令，在全局环境下安装Browserify。

 htmlbuilder使用的是commonJs规范，使用browserify打包，使用jake.js作为build tool？？

1，安装browserify

$ npm install -g browserify

*

C:UsersJoyce>browserify -v
(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})({},{},[]);

C:UsersJoyce>

在htmlbuilder中，最终打完包的build.js是这样的

(这一块同上.....)({

1:[],2:[],...,15:[]

},{},[1]);

*******************

browserify基本例子

//foo.js

// foo.js

module.exports = function(x) {
  console.log(x);
};

//main.js

// main.js

var foo = require("./foo");
foo("h1");

使用browserify编译，cmd到main.js的目录下，输入

browserify main.js > compiled.js
# 或者
browserify main > compiled.js
# 或者
browserify main.js -o compiled.js

生成的compiled.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){
//foo.js
module.exports=function(x){
    
    console.log(x);
};
},{}],2:[function(require,module,exports){
var foo=require("./foo");
foo("h1");
},{"./foo":1}]},{},[2]);

写一个html，引入compiled.js

 <script src="compiled.js"></script>

浏览器中会输出h1

*