jquery - 将 Browserify 与 JQuery 一起使用 - 'really' 是什么意思？

Question

javascript 等方面的新手。我想做一个纯 HTML/Javascript 项目。我查看了 requireJS，从我读到的内容来看，在我看来，一些项目经历了将他们的 requireJS 项目切换到 node/browserify 项目的痛苦。

所以我想我只是从一个 node/browserify 项目开始。

我有限的理解是，当您浏览一个项目时，它基本上将依赖项与您的 javascript 打包在一起。

几个问题

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

2. 如果它创建多个文件，那么如果多个文件依赖于同一个项目会发生什么 (例如lodash)？它是否附加了所需的源代码 项目多次？

3. 如果我使用浏览器端库怎么办 作为 JQuery...在这种情况下，根据 docs , 看来我 将需要使用 jsdom。当我浏览这个时会发生什么？是 它比仅使用 jquery 更昂贵？

Answer 1

Node.js 和 jQuery:

Node.js 和浏览器之间的一个重要区别是 Node.js 是 just a :

platform built on Chrome's JavaScript runtime

它只是意味着它允许您执行 javascript 代码。浏览器也有自己的 JS 运行时来在客户端执行脚本和此外还提供一个平均值 "for representing and interacting with objects in HTML, XHTML, and XML documents."这就是文档对象模型 (DOM)。

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

makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

---

Node.js 和 browserify:

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

Browserify 简单地模拟了 require 关键字，并允许您在浏览器中也使用它，如 here 所解释的那样。 :

Browserify uses the term entry file(s) to describe where it will start reading a dependency graph, and its output is referred to as a 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>