*
参考文章: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
*