超级Browserify和jQuery编程指南

介绍

1。手动

在过去，我启动了一个新的网页项目，然后想到使用jQuery。我会打开浏览器，找到jQuery的官方网站。点击下载jQuery按钮下载js文件，然后把它扔到项目目录中：

2。鲍尔

后来，我开始使用软件包管理工具如Bower。所以这个过程已经打开：打开命令行的第一个安装jQuery的凉亭。
Bower安装jQuery

然后继续使用它。

三.npmbrowserify

现在，我有了一个新的选择，也许是这样。

命令行安装jQuery的NPM。
NPM安装jQuery

在需要使用的Javaｓｃｒｉｐｔ代码中，引入了它：
var =需要（）；

是的，这是使用新包装的一般方法。但在具体，NPM包是jQuery，我们清楚地知道，并将它应用在浏览器。

Browserify，顾名思义，允许节点和NPM，这原本是服务器端，可以使用在浏览器端。

显然，上述过程还没有结束，接下来是Browserify的工作（假设在上面的代码中的文件称为主。JS）：
Browserify main.js O bundle.js

最后，该bundle.js文件参照的是browserify生成。

这是第三的选择建立在Browserify的基础上。

等等，怎么比以前更复杂了

CommonJS模块和依赖管理风格

事实上，在这个看似更复杂的过程中，要求（）具有重要的意义。

Browserify不仅仅是一个工具，可以让你轻松地引用Javaｓｃｒｉｐｔ封装。其关键能力是Javaｓｃｒｉｐｔ模块和依赖管理。（这是教师的主要业务）

至于模块依赖管理而言，已经有RequireJS和国内sea.js.and优秀作品，现在，Browserify给了我们一个新的选择。

Browserify所指的模块系统中的节点，并同意使用要求（）引入其他模块，并使用module.exports制定模块。在我看来，Browserify和RequireJS和sea.js的区别在于它不专注于提供一个运行时模块的加载，但强调预编码会带来一个预编译。额外的过程，但是你不需要遵循一定的规则添加一个包。结果，Browserify更是简洁和CommonJS规范更一致。

组织你的Javaｓｃｒｉｐｔ一样的节点，和Browserify会让他们在浏览器中正常运行。

安装和使用

命令行形式

命令行是官方使用的，因为它看起来是最简单的。

browserify本身也是NPM，安装在新公共管理的方法：
NPM安装- G browserify

在这里代表全球的参数，可以直接在命令行下，运行browserify命令你。Js文件（如条目。JS）：
Browserify entry.js O bundle.js

Browserify将递归分析要求（）在你的代码，然后编译生成的文件（bundle.js这里）。在编译后的文件，所有的Javaｓｃｒｉｐｔ模块被合并到一起，建立依赖关系。最后，你引用编译文件的HTML（如介绍中的饲料，）：

用于编译命令配置参数，参考节点browserify # usage.if你想要做一个更复杂的配置，命令行可能不太方便。在这个时候，它被推荐用于结合吞咽。

+口形式

当你用口，browserify只安装在一个项目：
新安装browserify --节省开发

建议添加，节省开发在后保存到您的项目package.json。

接下来是gulpfile.js部分，以下是一个简单的例子：
var =需要（）；
无功browserify =需要（browserify ）；
无功sourcemaps =需要（大口sourcemaps ）；
无功电源=需要（'vinyl-source-stream）；
VaR缓冲=需要（'vinyl-buffer）；

Gulp.task（browserify
var b = browserify（{
条目：， / / /主要SRC javaｓｃｒｉｐｔs。JS
调试：真
}）；

返回b.bundle（）
管道（源（包）
管道（缓冲器（））
。管（sourcemaps.init（{ loadmaps：true}））
。管（sourcemaps.write（，））
。管（gulp.dest（， / / javaｓｃｒｉｐｔs区））；
}）；

正如你所看到的，Browserify是独立的，我们需要使用它的API直接添加到任务的大口。

在上面的代码，调试：真实的告诉browserify同时为调试生成内联sourcemap，大口sourcemaps和sourcemap loadmaps介绍：真的为了设置内联一步阅读，将成为一个sourcemap file.vinyl-source-stream用来将Browserify束的输出（）的补气可用乙烯（虚拟文件格式）stream.vinyl-buffer是用来转换成乙烯乙烯流缓冲文件（这是一sourcemaps最大口插件需要）。

当这个配置，运行一browserify直接得到结果，也许是这样的。
如果你有很多的代码，您可能需要超过1编译这样的，它是缓慢的。在这个时候，watchify推荐。它只能编译所需的部分你修改文件后，而不是Browserify的原创编译，所以只有第一时间将需要一些时间来编译，然后立即更改刷新很快。

更多的browserify +大口大口的例子，请参阅食谱。

特点和简要原则

Browserify组织的Javaｓｃｒｉｐｔ的使用，有什么地方要注意的

要回答这个问题，让我们看看Browserify所做的。下面是一个更详细的例子。

该项目现在使用2个Js文件，这些文件具有依赖项，内容如下：

name.js
module.exports =绫；

main.js
var（=）；

console.log（你好！+名称）；

然后main.js跑的Browserify，对bundle.js文件内容是相同的。

bundle.js
函数E（t，n，r）{
…
（{）
1：{函数（需求，模块，导出）{
var（=）；

console.log（你好！+名称）；
}：2 } }，
2：{函数（需求，模块，导出）{
module.exports =绫；
{ } }。
}，{ }，{ 1 }）

/ / # sourcemappingurl = bundle.js.map

请忽略部分省略。然后，结构更清晰。你可以看到，整个是一个立即执行功能（生活），它接收3个参数，第一个参数是复杂的，第二，第三个参数是{ }和{ 1 }。

模块图

第一个参数是一个对象，它的每一个键都是一个数字。作为一个模块的ID，每个数字键对应的数组长度为2，我们可以看到，在前面的main.js编码功能（要求、模块、出口）{}结构包装起来，然后在阵列KEY1的第一要素。同样，在name.js代码也包装，对应的键。

一个数组的第二元是另外一个图对应，它代表了module.main.js的依赖是KEY1，这取决于name.js，所以其阵列的二元{ 。 /名称）：2 }。在name.js key2，它不靠，所以其阵列二元空对象{ }。

其结果是，这些第一个复杂参数，它们携带所有模块的源代码及其依赖关系，称为模块映射。

包装

如前所述，原始文件中的代码已经结束。为什么要像这样打包

由于浏览器的原生环境，没有要求（）。所以，你需要用代码做的（RequireJS和sea.js做）。这个包装器函数，3个参数的要求，模块，和出口，正是3个关键词，已实现了由Browserify的一个特定的功能。

隐藏物

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

入口模块

第三个参数是一个数组，指定模块ID作为输入。在前面的例子中，main.js是输入模块，其编号是1，所以这里的阵列

{ 1 }。数组显示有多个条目，如运行多个测试用例的场景，但相对较少的条目相对较小。

实现功能

记住省略号忽略了前面的代码吗这部分代码将解析3参数前面所提到的，然后让一切运行。这段代码是一个函数，从浏览器包项目的prelude.js。令人惊讶的是，它并不复杂，它有很多注释，并建议你读它你自己。

那么，你想注意什么呢

在这里，你看到Browserify的作品。是时候回到前面的问题。首先，在每一个文件，它不再需要包装本身。

你可能已经习惯于写如下：
（函数（）{（））
这里的代码。 /您的
}（）；

但你知道Browserify的汇编将在局部范围内把你的代码，你将不再需要自己做这件事，它会更喜欢这个。
这里的代码。 /您的

类似地，如果您想使用使用严格

其次，保持局部变量的风格。我们非常用来访问图书馆如通过如window.jquery和窗口的全局变量jquery美元，但如果Browserify使用，他们应该作为局部变量只。
var =需要（）；

$（#爱丽丝），文本（你好！；

这里的$仅在文件的代码范围内（独立的范围）。如果您想在另一个文件中使用jQuery，您需要以同样的方式去请求（）。

然而，新问题又来了。既然jQuery已经成为本地变量的形式，我们如何使用我们熟悉的各种jQuery插件呢

browserify垫片

您必须熟悉jQuery插件的使用方式：
jQuery插件是可用的。 /现在
很多jQuery插件这样做：默认window.jquery存在，然后以全局变量和增加自身的jQuery。显然，这是在browserify组织方式不管用。

为了使这种不相容的Browserify（实际上是不符合CommonJS）Javaｓｃｒｉｐｔ模块、插件等，也可用于Browserify，所以有browserify垫片。

在这里，把jQuery插件jquery.pep.js为例，看看browserify垫片的使用。

使用的例子

browserify垫片安装：

安装垫片，节省开发browserify NPM

然后做以下配置package.json：
browserify ：{
变换：{browserify垫片}
}，
浏览器：{

}，
browserify垫片：{
：依赖于{
}

最后一个是Js中的代码：
var =需要（）；
需要（）；

$（移动框）。Pep（）；

完成它！在这里，Browserify编译，你可以运行这个jQuery插件通常。

这是什么样的过程

在这种情况下，我们使用jQuery在NPM，和jquery.pep.js使用文件，下载本身（它不释放NPM许多jQuery插件）。看jquery.pep.js源代码，注意采用这样的包装：
函数（$，窗口，未定义）{
…
}（jQuery，窗口）；

可以看出，它默认在当前环境变量jQuery的存在（如果它不存在，这是错误的），看在package.json：{ jQuery：jQuery }是给它添加一个依赖声明。前jQuery表示需要（jQuery），而后一个jQuery意味着它被命名为jQuery（赋值语句）。这样，插件代码在运行时通常可以找到jQuery变量，然后将其添加到jQuery中。

事实上，browserify垫片的结构是不容易的。代码封装（虽然CommonJS，不兼容，但是有许多例）和不同的场景，browserify shim有不同的解决方法。

在配置更多的说明，请参阅browserify-shim.more参考官方文档可以在browserify垫片食谱看到。另外，如果你觉得browserify垫片是有点难以理解或是其原理感兴趣，推荐阅读在这个堆栈溢出的答案。

当然，browserify shim不是CommonJS兼容库或已处理的插件需要（例如，已出版的NPM）。

事实上，还有更多的转变。

在browserify垫片的例子面前，browserify ：{变换：{browserify垫片} }实际上是browserify配置。正如你所看到的，browserify垫片是一种变换的browserify。除此之外，还有很多的变换用于处理不同的要求，使browserify体系更加完善。

例如，你还记得在本文介绍的凉亭吗debowerify也允许包装的Bower被引用的要求（）。NPM鲍尔是软件包管理工具，Browserify说，你们都是我的翅膀。

一个小小的提示

Browserify是一个静态分析工具，所以它不支持动态要求（）。例如，以下不可：
无功郎=zh_cn ；
VaR I18N =需要（ / +朗）；

文件数据

一个更详细的描述Browserify，看到browserify手册。

后记

我认为Browserify是非常有趣的，它使用一个名字，让你觉得它只是一个节点浏览器端的转换工具，它还完成了浏览器中大多数节点核心库侧实施。但事实上，它已经越来越远了Javaｓｃｒｉｐｔ模块化发展的重要领域的一个新的系统。

你喜欢CommonJS的简约风格请Browserify！