From last week, I started my new journey of web application development. After I finished a React/Flux web application example, I think it is necessary to summarize some good web application development experience. In this article, I will introduce 6 great tools to help you accelerate Javascript application development. If you have rich Javascript application development experience, this article will be too basic for you. But you are still welcome to give us more good suggestions.

#1. npm

npm is first introduced as NodeJS package manager. But it becomes the best way to share and reuse Javascript code. After installed NodeJS, you can use npm command line to import JS libraries in your Javascript project, both browser project and backend project. For example, if I want to build a web application with React and Flux, what I need to do is just creating the project folder and running following command in project folder:

npm init
npm install --save react react-dom flux //install 3 js libraries: react, react-dom, flux

#2. Browserify

Browserify is a great js tool which helps us to bundle all js files into one js file. We can run following command in CLI to bundle all of js files into one:

browserify js/app.js -o js/bundle.js

The above command will bundle app.js and all other Javascript files which are required by app.js into one bundle.js.

#3. Watchify

Watchify is a similar js tool as Browserify, but it can run the bundle task automatically after there are changes in JS file. For example:

$ watchify main.js -o static/bundle.js

#4. Envify

Selectively replace Node-style environment variables with plain strings. We can run this tool in CLI or use it with Browserify. Here is an example to show how it works. In our js code, we write as below:

if (process.env.NODE_ENV === "development") {
  console.log('development only')
}

After running envify with NODE_ENV to be “production”, the above code will be transformed as below:

if ("production" === "development") {
  console.log('development only')
}

Therefore, this piece of code will never be called when our project is running under “production” mode.

#5. UglifyJS

UglifyJS is a great js tool which helps to parse, compress and beautify our js files. Usually, this is the last tool we will use to publish our Javascript project.

#6. Jest

Jest is a testing tool for Javascript project. I didn’t use it yet, but many friends recommend this.

npm Script to Development Job Automatically

When working in npm environment, we can make an automatically Javascript development environment. Here is one piece of scripts example in package.json file:

"scripts": {
    "start": "watchify -o js/bundle.js -v -d js/app.js",
    "build": "browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js",
    "test": "jest"
}

Running start script with below command:

npm start

Running build script with below command:

npm build