< go back to home

How To Use NPM Scripts As Front-End Build Tool For Javascript ES6

August 9, 2017

I first learned about front-end build tools to optimize development process and production by using Grunt. It was then followed by Gulp and soon after, Webpack. Like most stuff in Javascript, those tools are released one after another at a quick pace. In fact, I was in a project where we shifted to Gulp from Grunt midway of the development before even releasing the product. All those times, I thought automating front-end builds was all about selecting one of those toolkits. I then learned that NPM also has capabilities to serve as a build tool which kinda backwards. For this article, I'm going to show how NPM can be used for developing with Javascript Ecmascript 2015 in browsers.

To clarify first, I'm not making a case that NPM should totally replace Grunt, Gulp or Webpack. Although there are interesting articles related to that topic which I put in the reference section at the end of this article. I'm presenting this as an additional option that you can consider in your project. The advantage of using NPM script based on my experience are:

  1. There is no need to introduce new technology in a project. Using Gulp, Grunt or Webpack, someone unfamiliar would have to learn those first, in able to understand and start contributing on a project. With NPM, base technologies which is probably already familiar to everyone which makes it easier to start.
  2. Since, there are no additional abstractions, I find it easier to understand what is ehappening under the hood which makes me more comfortable as it provides better mental picture on what's happening in the build process.
  3. Related to no. 2, it could also help you be better in using Grunt, Gulp or Webpack when you then used any of those as it gives you more understanding on the technologies used under the hood. So using NPM as script is worth learning even if your not going to use it.

I'll only cover the build process for front-end javascript ES2015 development so the other tasks like uglify, minify and sass won't be included in this article although NPM is more than capable of those as well. You can check the reference section for links regarding those topic. I'll also go through the steps on how I arrive on the final setup which I beleive can help a beginner. If you only need the end result, click here. Let's start now :)

The first thing to do is to create a project folder named "npm-es6-tutorial". It will contain a simple website project that serves static files.

Next is to initalize our "package.json" file and install a module for serving HTTP. We will be selecting the module "http-serve" which is a simple webserver that can be used for development. Our webserver is not important within the context of the topic build tools. This should work in any webserver or frameworks like Apache, Nginx, Laravel or ExpressJS.

initial view of http serverd project folder in browser

We now have a running website that can be accessed at http://localhost:4000. Let's now build a very simpl home page. Create "index.html" and copy or type the code below.

Next is to create the "source" and "output" folders that will be named "src" and "public". This will contain the javascript codes.

The "src/javascripts" folder will contain the javascript ES2015 codebase. The coding will take place in that folder. The codes in there will be transpiled and browserified. This folder doesn't have to be accessible publicly as it will be only used for development. The generated codes will be placed in "public/javascripts" which will be used in the browsers. Ideally, you don't have to edit this as this will be generated. Our directory will now look like this:

Let's download and use jquery to be able to also show how to use libraries from "node_modules" to the browsers.

We'll now start working with our javascript es2015 codebase. Create a file "app.js" in "src/javascripts" and add the following code:

Download Babel components to be able to translate the javascript es2015 version to es5 version.

The three libraries installed are:

To now use Babel in the command line. Run the following:

You should now see the "main.bundle.js" file generated in "public/javascripts/main.bundle.js". Open it and check the now es5 compatible javascript codebase. This is really cool but we are just starting out. Of course we will not use Babel this way, we'll utilize NPM to manage our commands. Open "package.json" and add the following to the "scripts" key:

Now we can run babel using NPM scripts capability. First delete the compiled file to see that it will be generated again.

You will see that "main.bundle.js" was generated again similar to the direct usage of babel command that we've used earlier. As you observed, we can use "npm run" command on whatever is in the "scripts" of "package.json" using the key assigned to the command. In this case, we assigned it as "babel" but we can choose any name.

Refresh "index.html" in your browser. You will see that we are getting error "require is not defined" even though we already transformed our codebase to es5 which is the current universally supported in browsers. The reason for this is even though our codebase is now in es5 version, it is not yet built to work in browser environment. That is because babel es5 transformation does not assume that the environment will be browser as long as it satisfies es5 specs. For making this work in browser, we'll have to use another tool, "browserify":

Error message "require is not defined".

Edit package.json again and add the following after the "babel" line we've included earlier.

Now run the command command line for browserify and refresh your browser. You should be able to verify that the javascript is working now.

Success!

You now have a complete process of developing in Javascript es2015 version and be able to compile it to es5 that can run in browwsers. There is a problem though, the process that I presented was not really ideal because a browser incompatible codebase is being placed to the public folder in the "babel" step that is followed by browsefying which feels hackish. As I've shown here, it could work but I've encountered issues with this setup with regards to dependencies with other modules that you've created within the "src" folder.

A better solution is to use "Babelify" which is a Browserify transform package for Babel. This will allow to directly transform the es2015 codebase in browser usable form without the need for two-step process we presented.

In package.json, replace the browserify command with the code below:

With the new browserify line, we've added Babel es2015 transformation through "Babelify". This means that the es2015 to es5 to browserify is now done in a single command. Running "npm run browserify" and refreshing the browser should verify that this the genrated javascript code was success.

Below is the full package.json. You may also check the github codebase here.

This article showed how to use NPM scripts as a build tool for using Javascript ES2015 in front-end development that can run in browsers. Happy coding!




Refernces:

< go back to home