浏览器和jQuery编程超级指南

导言1。用手

过去，我开始了一个新的web项目，然后想到使用jQuery。我会打开浏览器，找到jQuery的官方网站，点击醒目的“下载jQuery”按钮，下载。js文件，然后将其扔在项目目录中。在你需要使用它的地方，用这样的脚本介绍它：

脚本src=' http : path/to/jquery . js '/script 2。凉亭

后来，我开始使用像Bower这样的包管理工具。所以这个过程变成：首先打开命令行，用bower安装jQuery。

Bower install jquery继续用脚本介绍它。

脚本src=' http : bower _ components/jquery/dist/jquery . js '/script 3。npmBrowserify

现在，我有了新的选择，大概是这样的：

用npm安装jQuery的命令行。

Npm install jquery被引入到需要使用它的JavaScript代码中，如下所示：

var $=require(' jquery ')；是的，这是使用npm包的一般方法。但是特别的是，这个npm包是jquery，我们很了解它，它将会在浏览器中使用。

浏览器功能，顾名思义，使原本属于服务器端的Node和npm在浏览器端可用。

显然，上面的过程还没有结束，下一步就是Browserify的工作(假设上面代码所在的文件叫做main.js):

Browserify main.js -o bundle.js最后用脚本引用Browserify生成的bundle.js文件。

script src=' http : bundle . js '/script这是基于Browserify的第三种选择。

等等，为什么比以前复杂？CommonJS风格的模块和依赖管理

事实上，在这个看似比较复杂的过程中，require()有着非同寻常的意义。

Browserify不仅仅是一个让你轻松引用JavaScript包的工具。它的关键功能是JavaScript模块和依赖关系管理。(这是老师的主业)

就模块和依赖管理而言，已经有RequireJS、国产Sea.js等优秀作品了现在，Browserify给了我们一个新的选择。Browserify是指Node中的模块系统，同意使用require()引入其他模块和模块. exports来导出模块。在我看来，Browserify与RequireJS和Sea.js的不同之处在于，它并不专注于提供“运行时”模块加载器，而是强调预编译。预编译会带来一个额外的过程，但相应地，你不再需要遵循某些规则来添加一层包。因此，相对来说，Browserify提供的组织更简单，更符合CommonJS规范。

像写Node一样组织你的JavaScript，Browserify会让它们在浏览器中正常运行。安装并使用命令行形式

命令行形式是官方用法，因为它看起来最简单。

Browserify本身也是npm，由npm安装：

Npm install -g browserify这里-g的参数代表全局，所以可以直接在命令行中使用。接下来，运行browserify命令。js文件(如entry.js):

browserifyentry . js-o bundle.jsbrowserify将递归地分析代码中的require()，然后生成一个编译文件(这里是bundle . js)。在编译后的文件中，所有的JavaScript模块已经合并，依赖关系已经建立。最后，您引用这个html格式的编译文件(嘿，和介绍中的一样):

脚本src=' http : bundle . js '/脚本有关此编译命令的配置参数，请参考node-browserify #用法。如果你想做更精细的配置，命令行形式可能会不方便。在这种情况下，建议结合大口使用。大口形式

当与大口一起使用时，您的浏览器仅安装在特定项目中：

NPM安装浏览器if-save-dev建议添加下面的-save-dev，将其保存在项目的package.json中。

下面是gulpfile.js的部分，下面是一个简单的例子：

var大口=require('大口')；var browserify=require(' browserify ')；var source maps=require(' gull-source maps ')；var source=require('乙烯基-source-stream ')；var buffer=require('乙烯基-buffer ')；gough . task(' browserify '，function(){ var b=browserify({ entry : })。/JavaScript/src/main . js '，debug : true })；返回b.bundle()。管道(源(' bundle.js ')。管道(缓冲区())。管道(source maps . init({ LoadMaps 3360 true }))。管道(sourcemaps.write(' . '))) .烟斗(大口。目的地。/JavaScript/dist’)；});如您所见，Browserify是独立的，因此我们需要直接使用它的API，并将其添加到grave的任务中。

在上面的代码中，debug: true告诉Browserify在运行时生成用于调试的内联sourcemap。引入了glow-sourcemap，并将loadMaps: true设置为读取上一步中获得的内联sourcemap，并将其转换为单独的source map文件。黑胶源流用于将Browserify的包()的输出转换为一个黑胶(一种虚拟文件格式)流，可供大口使用。乙烯基缓冲用于将乙烯基流转换成缓冲的乙烯基文件(这种格式是大口源地图和大多数大口插件所需要的)。

完成此配置后，您可以通过直接运行gulp browserify来获得结果，可能是这样的：

如果你有很多代码，可能需要1个以上的时间来编译，就像上面显示的那样，这相对较慢。在这种情况下，建议使用watchify。它可以在您修改文件后只重新编译所需的部分(而不是Browserify的所有原始编译)，这样只需要第一次编译就需要一些时间，然后立即的更改就会非常快地刷新。

有关浏览大口的更多示例，请参见大口食谱。特点和简要原则

用Browserify组织JavaScript有什么需要注意的吗？

要回答这个问题，我们先来看看Browserify做了什么。下面是一个更详细的例子。

有两个。项目中使用的js文件，它们有依赖关系。它们的内容是：name.js

module.exports=' ayamain.js

var name=require('。/name’)；控制台日志(‘你好！’姓名)；然后在main.js上运行Browserify，bundle.js的文件内容如下：bundle.js。

(函数e(t，n，r) { //.})({ 1:[函数(必需，模块，导出){ var name=require('。/name’)；控制台日志(‘你好！’姓名)；}, {'./name': 2}]，2:[函数(require，module，exports){ module . exports=' aya '；}、{}]}、{}、[1])//# sourcemappingurl=bundle . js . map请先忽略省略号。然后，它的结构就清晰多了。如你所见，整体是一个即时函数(IIFE)，它接收3个参数。第一个参数比较复杂，这里第二个和第三个参数分别是{}和[1]。模块图

第一个参数是一个对象，每个键都是一个数字。作为模块的id，每个数字键对应的值是一个长度为2的数组。可以看到main.js中的代码被函数的结构(require、module、exports) {}，包装后成为key1数组中的第一个元素。类似地，name.js中的代码也被包装并对应于key2。

数组的第二个元素是另一个映射对应，表示模块的依赖关系。Main.js在key1中，key 1依赖于name.js，所以它的数组的第二个元素是“{”。/name': 2}。在key2的name.js中，它没有依赖关系，所以它的数组的第二个元素是一个空的Object{}。

因此，这个第一个复杂参数携带了所有模块的源代码及其依赖关系，因此称为模块映射。包裹

如前所述，原始文件中的代码被打包。为什么包装成这样？

因为浏览器原生环境中没有require()。因此，它需要在代码中实现(RequireJS和Sea.js也是如此)。这个包装函数提供的三个参数，require、module和exports，是Browserify实现的特定函数的三个关键字。躲藏

第二个参数几乎总是空的{}。如果它存在，它也是一个模块映射，它代表在此编译之前从其他地方加载的内容。在这个阶段，让我们忽略它。入口模块

第三个参数是一个数组，它指定模块id作为条目。在前面的例子中，main.js是入口模块，它的id是1，所以这里的数组是[1]。其实数组描述可以有多个条目，比如运行多个测试用例的场景，但是相对来说，多个条目还是比较少的。实现功能

还记得前面省略的省略号中的代码吗？这部分代码将解析上述三个参数，然后使一切正常工作。这段代码是browser-pack项目prelude.js中的一个函数。令人惊讶的是，它并不复杂，而且注释丰富，所以建议您自己阅读。那么，我们应该注意什么呢？

在这里，您已经看到了Browserify是如何工作的。是时候回到前面的问题了。首先，在每个文件中，不再需要自己打包。

你可能已经习惯这样写了：

；(function(){ //您的代码在这里。}());但是您已经知道Browserify的编译会将您的代码封装在本地范围内，所以您不再需要自己做这件事，这样会更好：

//您的代码在这里。同样，如果要使用‘使用严格’；启用严格模式，直接写在外面就可以了，也就是说在一个文件的代码范围内启用严格模式。

其次，保持局部变量的风格。我们习惯于通过像window.jQuery和window这样的全局变量来访问像jQuery这样的库。$，但是如果使用了Browserify，它们应该只用作局部变量：

var $=require(' jquery ')；$('#alice ')。文字('你好！');这里的$只存在于该文件的代码范围(独立范围)中。如果要在另一个文件中使用jQuery，则需要以同样的方式要求()。

然而，新的问题又来了。既然jQuery已经成为了这个局部变量的形式，那么我们应该如何使用各种熟悉的jQuery插件呢？浏览器填充

您必须熟悉jQuery插件的用法：

脚本src=' http : jQuery . js '/script script src=' http : jquery . plugin . js '/script script//现在jquery插件可用了。/script许多jQuery插件都是这样做的：window.jQuery默认存在，然后取这个全局变量并将其自身添加到jquery中。显然，这不能在Browserify的组织中使用。

为了让“与Browserify不兼容”(实际上与CommonJS不兼容)的JavaScript模块(如插件)可用于Browserify，browserify-shim是可用的。

下面，以jQuery插件jquery.pep.js为例，请看如何使用browserify-shim。用法示例

要安装浏览器垫片：

npm安装浏览器-填隙程序-保存-开发

然后在package.json中进行如下配置：

browserify ' : { ' transform ' :[' browserify-shim ']}，' browser ' : { ' jquery . pep ' : '。/vendor/jquery.pep.js'}，Browserfy-shim ' : { ' jquery . pep ' : { ' dependent ' :[' jquery 3360 jquery ']} }最后，代码在。js:

var $=require(' jquery ')；需要(' jquery . pep ')；$('.移动框')。pep()；搞定了。此时，在Browserify编译后，jQuery插件可以正常运行。

这是一个怎样的过程？

在这个例子中，jQuery来自npm，而jQuery.pep.js是一个自己下载的文件(和很多jQuery插件一样，它还没有发布到npm)。检查jquery.pep.js源代码，注意它是这样包装的：

；(函数($，窗口，未定义){ //.}(jQuery，window))；可以看到，它默认当前环境中存在一个变量jQuery(如果不存在，就会报错)。在package.json中，' dependency ' :[' jQuery 3360 jQuery ']是为其添加依赖声明。前一个jquery意味着require('jquery ')，后一个jquery意味着将其命名为jquery(赋值语句)。这样，在插件代码运行时就可以正常找到jQuery变量，然后就可以添加到jQuery本身了。

实际上，browserifshim的配置并不容易。Browserify-shim对于不同的代码打包有不同的解决方案(虽然和CommonJS不兼容，但是有很多情况)和不同的使用场景，这里只介绍一下。

有关配置的更多说明，请参考官方文档browserifyshim。有关更多参考，请参见浏览垫片配方。此外，如果您发现browserifshim有些难以理解或对其原理感兴趣，建议阅读此堆栈溢出的答案。

当然，已经用CommonJS兼容性处理过的库或插件(例如，它们已经发布到npm)不需要browserifshim。实际上，还有更多转换

在前面的Browserify-shim示例中，‘Browserify’: {‘transform’:[‘Browserify-shim’]}实际上是Browserify的配置。可见，Browserify-shim只是Browserify的变换之一。除此之外，还有许多变换可以使用，可以满足不同的需求，使Browserify的系统更加完善。

比如，还记得本文介绍中的Bower吗？Debowerify允许用require()引用通过Bower安装的包。Npm和bower都是包管理工具，Browserify意味着你是我的两翼。一点提示

Browserify是一个静态分析和编译工具，所以不支持动态require()。例如，不允许出现以下情况：

var lang=' zh _ cnvar i18n=require('。/‘郎’；文件材料

有关浏览的更多详细文档，请参见浏览手册。标签

我觉得Browserify很有意思。它用了这样一个名字，让你感觉好像它只是Node的一个浏览器端转换工具。为此，它还完成了Node中大多数核心库的浏览器端实现。但事实上，它更进一步，在JavaScript模块化开发的重要领域创造了一个全新的系统。

喜欢CommonJS的简洁风格？试试浏览器！