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

Using Browserify with JQuery - what does it 'really' mean?

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

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

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

几个问题

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

  2. 如果它创建多个文件,那么如果多个文件依赖同一个项目会怎样 (例如lodash)?它是否附加了所需的源代码 项目多次?

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

  4. 更昂贵

Node.js 和 jQuery:

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

platform built on Chrome's JavaScript runtime

它只是意味着它允许您执行 javascript 代码。浏览器也有自己的 JS 运行time 在客户端执行脚本 另外提供一个平均值 "for representing and interacting with objects in HTML, XHTML, and XML documents." 就是 Document对象模型 (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>