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

Question

New to javascript, etc. I wanted to do a pure HTML/Javascript project. I looked at requireJS, and from what I read, it seemed to me that a few projects went through the pain of switching their requireJS project to node/browserify projects.

So I thought I just start with a node/browserify project.

My limited understanding is that when you browserify a project, it basically packages the dependencies along with your javascript.

Couple of questions

1. Does it create just one file?

2. If it creates multiple files, then what happens if multiple files depend on the same project (such as lodash)? Does it append the source code of the required project multiple times?

3. What if I'm using browser side library such as JQuery...in this scenario, according to the docs, it seems that I would need to use jsdom. What happens when I browserify this? Is it more expensive than just using jquery?

Answer 1

Node.js and jQuery:

One important distinction between Node.js and a browser is that Node.js is just a:

platform built on Chrome's JavaScript runtime

it simply means that it allows you to execute javascript code. Browsers also have their own JS runtime to execute scripts on the client side and in addition provide a mean "for representing and interacting with objects in HTML, XHTML, and XML documents." and that is the Document Object Model (DOM).

In Node.js there are no HTML files and you just have to do with JS code, thus using jQuery in Node.js doesn't make any sense, 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 and browserify:

Node.js provides a module loading system which allows you to include other modules using the require keyword. So any JS code containing the require code cannot be executed in the browser, since up to ECMA5 there are no built-in module loading mechanisms.

Browserify simply mocks the require keyword and allows you to make use of it also in browsers, as explained 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 for your project?:

Since your project is aimed to be run inside a browser (and not on a server) there is no need to migrate to Node.js. However, you could use Nodejs to better maintain your project:

• Seperate the project in modules in development and create a single bundle file with browserify for production.
• Use a number of preprocessors, and compiles (e.g. coffeeScript, Less, etc)
• Test your modules (e.g mocha, jest)
• Use a build system (e.g gulp)
• etc...

And after you have, tested your modules (and compiled your coffeescript!) you just let browserify to created your main.bundle.js and just import it like this in your production:

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