Browserify: 使nodejs模块可以在浏览器下使用

Browserify：浏览器加载Node.js模块

--------------------------------------------------

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

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

npm install -g browserify

browserify -h //查看帮助信息

browserify --help advanced

example:

------------

//foo.js:

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

//main.js:

var foo = require('./foo');

foo('hello, browserify~~');

command-line input:

browserify main.js > compiled.js //合并foo.js和main.js并可以用于浏览器环境的js

等价命令

browserify main > compiled.js

browserify main.js -o compiled.js

html中<script>标签引入 <script src="compiled.js"> </script>

example:

------------

我们再看一个在服务器端的backbone模块转为客户端backbone模块的例子。

先安装backbone和它所依赖的jQuery模块。

npm install backbone jquery //一次安装2个库?

然后，新建一个main.js文件。

// main.js

var Backbone = require('backbone');

var $ = Backbone.$ = require('jquery/dist/jquery')(window);

var AppView = Backbone.View.extend({

render: function(){

$('main').append('<h1>Browserify is a great tool.</h1>');

}

});

var appView = new AppView();

appView.render();

接着，使用browserify将main.js转为app.js。

browserify main.js -o app.js

app.js就可以直接插入HTML网页了。

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

注意，只要插入app.js一个文件就可以了，完全不需要再加载backbone.js和jQuery了。

> 生成模块

有时，我们只是希望将node.js的模块，移植到浏览器，使得浏览器端可以调用。这时，可以采用browserify的-r参数（--require的简写）。

browserify -r through -r ./my-file.js:my-module > bundle.js

上面代码将through和my-file.js（后面的冒号表示指定模块名为my-module）都做成了模块，可以在其他script标签中调用。

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

<script>

var through = require('through');

var myModule = require('my-module');

/* ... */

</script>

可以看到，-r参数的另一个作用，就是为浏览器端提供require方法。