grunt-browserify

grunt-browserify可以实现js的模块化加载。让我们的浏览器端也能像nodejs一样使用node语言组织模块。

一.安装

npm install grunt-browserify

二.gruntfile配置

browserify: {
<span style="white-space:pre">	</span>main: {
<span style="white-space:pre">		</span>src: 'js/test.js',
                dest: 'js/test_final.js'
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>}

即我们最终要将test.js编译成test_final.js

三.代码

创建一个模块test1.js

写一个最简单的

</pre><pre name="code" class="javascript">var setValue = function(value) {
	return value;
};
exports.setValue = setValue; //定义对外的接口

<span style="font-family: 'Microsoft YaHei'; font-size: 14px;"></span>

(2).创建我们要进行编译的test.js

var test1 = require('./test1.js');	//引入模块test1.js

var num = 1;

var count = function() {
	var value = num + test1.setValue(2);
	return value;
};

var result = count();

console.log(result);	//3

这样我们浏览器端就能跟nodeJs一样通过require()来加载模块。

在引入我们自定义的模块的时候，要在前面加上'./'，就如上面的 require('./test1.js');

当然我们也可以引入node本身原有的模块，这时候直接引用即可。例

var common = require('mobile-common');

四.运行

最后运行 grunt browersify即可