Browserify -- 让npm在浏览器端运行 (一)
发布在前端模块化工具研究2013年12月5日view:13261
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here

随着JavaScript客户端应用的日渐流行,尤其是在SPA(single page Application)大行其道的今天,我们需要在浏览器端编写大量的JavaScript代码。随着代码量的增多,业务逻辑变得越来越复杂,找到一种组织代码的方式显得越来越重要。在大型企业级JavaScript应用中我们需要多人分工合作,而且众所周知JavaScript的全局作用域污染以及变量名重复互相干扰一直是一个很大的问题。

许多聪明又精力充沛的工程师一直在探索这个问题的各种解决方法,在过去的很多JavaScript库中,我们常常使用命名空间的的方法来解决全局作用域污染的问题,也在一定程度上对代码进行了组织。随着CommonJS的提出,我们了解到使用模块化来组织JavaScript代码是一种更好的代码组织方式。在后端JavaScript领域,目前风头正劲的node率先采用了这种方式,熟悉node编程的同学一定对node中的require方法不陌生,这种形式不仅使代码易于组织,完全解决的全局空间污染的问题,并且使多人合作成为了可能。想象一下,在一个大型项目中,每人去写一个模块并在模块中暴露自己编写的方法,使用的人只需要去require就可以使用你编写的方法,多么美妙优雅的合作方式。在前端JavaScript领域,我们有目前大受欢迎的requireJS以及seaJS等等(在后面的文章中会对而进行讲述)。

一切看起来都很好,但是你无法去想象精力充沛的前端工程师会做出些什么事情来。在这篇文章中要介绍的browserify就是这样一个产物。它让我们可以像node一样在浏览器端用require的方式来组织使用代码,更神奇的是它还能让我们使用npm模块,甚至可以使用一些node的核心模块。

听起来很酷很神奇对不对?下面我们正式开始介绍browserify这个神奇的工具。

Browserify是一个允许我们在浏览器端编写node.js风格模块的开发工具。就像node一样,我们在不同的文件中编写我们的模块,然后使用module.exports和exports变量来暴露属性和方法。我们甚至可以使用require函数来使用其他模块,如果我们省略了相对路劲那么它会在node_modules文件夹中寻找模块。

开始使用

我们首先通过npm来安装browserify:

npm install browserify -g   

我们的第一个模块

multiply.js

module.exports = function (a,b){
    return a * b;
};

square.js

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

module.exports = function (n) {
  return multiply(n, n);
};

index.js:

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

console.log(square(125)); //=> 15625  

现在我们已经编写了几个互相require的模块,我们现在可以运行browserify来生成在浏览器中运行的文件:

browserify index.js -o bundle.js   

现在我们已经有了一个捆绑了三个模块的bundle.js文件,我们可以在我们的html页面中的任意一个script标签中引用它,并且它会在浏览器总自动解析require调用。在浏览器中添加

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

然后我们可以看到JavaScript控制台输出15625。

NPM + Browserify

由于Browserify实现了node.js模块算法,我们可以轻松的使用npm从包管理器安装模块并在浏览器中使用它们。在npm中已经有很多的模块可以用于像browserify遮掩高的攻击,但是最令人激动的是看到那些专门为node所编写的模块无需任何改变既可以在浏览器端运行。我们现在安装underscore并将它包含在我们的脚本中。

nom install underscore --save

var _ = require('underscore');

_.each([1, 2, 3], function (n) { console.log(n); //=> 1, 2, 3 });

Node核心模块

和类似工具相比,browserify最吸引人的地方在于它包含了node.js的核心模块。模块例如url,path,stream,events以及http完全可以使用在浏览器端。我们在浏览器端并不能做node能做的所有事情,但是我们可以在浏览器端使用node.js风格的代码做所有事情。

对于客户端的应用最明显有用的核心模块是query string。url和path。ton通过require这些模块,我们可以在客户端脚本中轻松的解析并分解urls,查询字符串和路径。在此之上,Browserify还生成了process,Buffer,_dirname,_filename以及global变量。这意味着我们可以使用process.nextTick轻松地在下一个事件循环中调用一个函数。Browserify中还设置了一个特别的process.browser标示,因此我们可以快速检查脚本是否运行在浏览器环境中。

变形(transform)

Browserify最强大的功能是源变形(transform)。源变形是一个主语在被解析模块和返回内容之间的流。使用源变形的最简单的例子是将CoffeeScript编译成JavaScript。使用coffeeify以后我们无需在进行预编译过程,它就那么运行起来了。(现在不明白没关系,在后面我们会具体介绍)

到目前为止,你已经学会了如何使用Browserify创建一个在浏览器中运行的脚本文件了。在后面的文章中我们将介绍Browserify的高级用法。如果你想了解关于Browserify更多的信息,文档是一个很好的去处。


本文属于原创,参考自Introduction to Browserify,地址http://blakeembrey.com/articles/introduction-to-browserify/

如果你觉得本文对你有帮助,请点击下面的链接为我提供赞助

评论
发表评论
暂无评论
WRITTEN BY
张小俊128
Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
TA的新浪微博
PUBLISHED IN
前端模块化工具研究

介绍前端模块化工具的基础知识和使用方式

友情链接 大搜车前端团队博客
我的收藏