使用Browserify和JQuery - 这到底意味着什么？

Question

对于Javascript等方面我还是新手，我希望做一个纯HTML/Javascript项目。我看了一下requireJS，从我所读到的内容来看，好像有几个项目经历了将他们的requireJS项目切换到node/browserify项目的痛苦。

所以我想我就从node/browserify项目开始。

我的理解有限，当你browserify一个项目时，它基本上会将依赖项与你的javascript一起打包。

几个问题：

1. 它只创建一个文件吗？

2. 如果它创建多个文件，那么如果多个文件都依赖于同一个项目（比如lodash），它会多次附加所需 项目的源代码吗？

3. 如果我正在使用浏览器端库，例如JQuery...在这种情况下，根据文档，似乎需要使用jsdom。当我browserify它时会发生什么？相比只使用jquery，它是否更昂贵？

- hba

---

它至少为我创建了一个文件。依赖项不会被多次包含（至少不在同一个文件中，我不知道是否可以创建多个文件），我在一个 browserify 项目中使用 jQuery（semantic-ui 需要它）。查看此 gulpfile（函数“build”，对象 browserifyArguments）以获取一些随机用例。抱歉，现在无法编写真正的答案。https://github.com/hyperstone/moon-shard/blob/master/gulpfile.js - Florian Wendelborn

Answer 1

Node.js和jQuery：

Node.js和浏览器之间的一个重要区别在于，Node.js只是基于 Chrome JavaScript运行时的平台：

它只是意味着允许你执行JavaScript代码。浏览器也有自己的JS运行时来在客户端执行脚本，并且提供一种{{link3：“用于表示和与HTML、XHTML和XML文档中的对象交互”的方法}}，即文档对象模型（DOM）。

在Node.js中没有HTML文件，你只需要使用JS代码，因此在Node.js中使用jQuery没有任何意义，因为jQuery：

通过易于使用的API，使得诸如HTML文档遍历和操作、事件处理、动画和Ajax等事情变得更加简单，可在众多浏览器上使用。

---

Node.js和browserify：

Node.js提供了一个模块加载系统，它允许您使用require关键字包含其他模块。因此，任何包含require代码的JS代码都无法在浏览器中执行，因为在ECMA5之前没有内置的模块加载机制。

Browserify简单地模拟了require关键字，并允许您在浏览器中使用它，如这里所解释的：

Browserify使用条目文件来描述它将从哪里开始读取依赖关系图，其输出称为bundle。

---

你的项目需要Node.js吗？

由于你的项目旨在在浏览器中运行(而不是在服务器上)，因此无需迁移到Node.js。但是，你可以使用Nodejs更好地维护你的项目：

• 在开发中将项目分成模块，并使用browserify创建单个捆绑文件以供生产使用。
• 使用多个预处理器和编译器（例如 coffeeScript, Less等）
• 测试你的模块（例如 mocha, jest）
• 使用一个构建系统（例如 gulp）
• 等等...

在测试你的模块（并编译你的coffeescript！）之后，只需让browserify创建你的main.bundle.js，然后像这样在生产环境中导入它：

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="main.bundle.js"></script>

- Yan Foto

---

这非常有帮助，我今天会更多地使用Browserify并相应地标记此答案。 - hba

@hba 如果答案没有回答问题的所有要点，请告诉我。 - Yan Foto

我不确定你的评论 - 在node-js上使用jquery没有意义 - 是否正确。 - hba