Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:11Length:1.6 hours
Toolsforjs
  • Overview
  • Transcript

5.1 NPM and Browserify

The idea of JavaScript modules spawned from Node and Node Package Manager (NPM) has become a mainstream resource for distributing both client- and server-side JavaScript components. We’ll look at NPM and a component called Browserify in this lesson.

Related Links

1.Introduction
1 lesson, 00:40

Free Lesson
1.1
Introduction
00:40

2.Code Editors
3 lessons, 23:10

Free Lesson
2.1
GitHub's Atom
09:30

2.2
Adobe's Brackets
06:06

2.3
Microsoft's Visual Studio
07:34

3.Runtime Environments
1 lesson, 10:41

3.1
Browser Development Tools
10:41

4.JavaScript Components
3 lessons, 39:01

4.1
Require.js
13:31

4.2
Modernizr
09:43

4.3
Handlebars
15:47

5.Node Packages
2 lessons, 23:47

5.1
NPM and Browserify
08:42

5.2
Grunt
15:05

6.Conclusion
1 lesson, 00:42

6.1
Conclusion
00:42


5.1 NPM and Browserify

In the past few lessons we've been looking at components that we can use within our applications. And we have retrieved those components in a conventional way. We've gone to their websites and downloaded the necessary files. But recently there's been a push to start packaging components as node packages. Not so much so that we can use them within a node application, but because node package manager makes it very easy to install packages within your project. And if you are writing a node application, then you are good to go. But if you plan on using node packages on the client side, well, you need to use a utility called a browserify. And that's what we're going to look at in this lesson. So first and foremost, you need to install node on your machine. Go to nodejs.org, click on install, and then run the installer, and I believe we've done that in a previous lesson. Once you have node installed, you have NPM, and you are ready to go. So, I have created a folder called myproject. And as you can see, there is nothing in this folder. Now, in order to use node package manager to manage the packages of this project, we need to initialize a package.json file. We can do that very easily by going to the command line and inside of our projects folder, we do NPM init. And this is going to walk us through the creation of a package.json file. The first thing it wants is the name of the project, and that defaults to the name of the folder. So I'm going to use that, the version is 1.0, that's fine. Description I'm going to leave blank. Entry point, index.js is fine. And everything else is going to be blank. Now it is going to complain that some of these things are blank, but that's okay. And we will see those warnings whenever we install some packages. But it's asking if this is okay. And it is. And if we look at this file, we now can see that we have this package.json. And as we install packages, then this is going to change a little bit. So, let's first of all create an index HTML file. That's something that we would have within a normal website. And let's just give it some boilerplate HTML. So we of course need an html element. We also need a head element. And we could have a title here. And let's do the title as NPM and Browserify. And then let's also have a body. And inside of this body, we will have a script element, that is going to pull in jQuery, and let's just call that jquery.js. Let's also have another script element that will contain some actual code, where we append something to the documents. So document.body and then append. Let's use a paragraph element and do Hello World. And we are going to use node package manager to install the jQuery package. We're going to use Browserify to turn that package into something that we can use within the browser. So first of all, we need to install the jQuery package. So we can go back to the command line, and we can do npm install jquery. And then we can use the save option. That's going to save the dependency here. And here we have the warnings saying that we have no description or repository or README data, and that's fine. But if we go to the folder, we can see that we now have this node_modules. Inside of here we have jquery. And we have not only the distribution files but we also have the source code. So if we wanted to build our own version of jQuery, we could do that but we're not. Instead, we're going to use one of the distribution files. Now we could just copy this file and then paste it in here. And that would be fine. But, instead we want to use Node Package Manager and Browserify to do all of that for us. Now before we go any further you need to know that node packages are modules. They are a modified version of the common JS modules and in order to use these modules within a node application, we call a function called Require and that would load that module so that we could use it within whatever file that we were working in. Let's create a new JavaScript file. I'm going to call this jq-build.js and I'm going to require the jQuery module. So let's go to brackets. Let's open up this jq-build and we would do require and then the name of the module, jquery. Now, in a node application, we would do something like this. We would do var $ = require and then pass in jquery. And then we could use the dollar sign as the dollar sign that we are used to. But in our case, we need to make this globally accessible. So instead of var $, we're going to do window.$. And as far as JavaScript is concerned, this is really all that we need to do. The rest Browserify is going to do. So first we need to install Browserify. We can do that with Node Package Manager. What to install, and we can make this a global installation. And we want to install Browserify. Now, there's a lot of dependencies for Browserify, so it's going to download all of those dependencies, and of course, once it's done, we are going to see that we are ready. There we go. And then we want to use Browserify to take this jq-build file and output another file. One that we can use jQuery. So, we will use the browserify command. We want to reference that jq-build.js. We want to use the -o option. And then we want to output. That to jquery.js and this is going to give us a JavaScript file called jquery.js. We can see it right here and if we load index.html in the browser, then we should see the text Hello World. So, let's use the live preview and indeed we do. And that's one way that we can do this, but let's do this in a different way. Instead of just building a jQuery file, let's put all of our code into a single JavaScript file, so that we only reference one file here and we won't have this other script elements, although we are going to have the script element, because I'm going to show you one of the advantages of doing it this way. So I'm going to create another JavaScript file. I'm going to leave that jq-build file just for the sake of the code download for this lesson. And I'm going to call this new file mainjs, and it's going to have the same type of code where we are going to require jQuery, but then we're also going to have the application code, where we are writing information to the document. So let's grab the code that we have inside of our build file. Let's paste that into main.js. But instead of doing window.$ = require, we're going to do that var $ that we briefly looked at earlier in this lesson. So now, let's grab our application code where we are going to write information to the document. I'm going to take that out. Paste that into main.js. And that's all that we will have to do. Now we can go to the console. We can do Browserify. And we want to turn main.js an output app.js or something else. App makes sense in this case to me. So let's change the HTML file to reference app.js. And this gives us the benefit of having all of our code in a single file. But it also gives us a clean global scope. We will no longer have a $. And we will see undefined whenever we refresh the page. So if we go back to the browser and refresh, we're going to see the same content but of course we see undefined for the $ variable. And so by using node package manager and Browserify, we were able to use node packages within the browser. Of course it's a little more complicated than just going to a website and downloading the necessary files. But as you start to find components that are packaged as node packages, the more something like this makes sense.

Back to the top