Configure Babel and Webpack for NPM (Node Package Manager) based project

 

What is NPM (Node Package Manager) ?

NPM (Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager used in NodeJs.  It enables the path of accessing thousands of  reusable javascript libraries for your project.

NPM was initially developed as the package manager of the NodeJs. Therefore NPM is distributed (available) with the NodeJs installation.

 

NPM (Node Package Manager) and NodeJs Server

Here we are going to create a project that manage its dependencies with NPM.  Therefore if you dont have the NPM installed in you development environment, please visit the NodeJs website and install the NodeJs.  If you instal the NodeJs, you will get both NPM (Node Package Manager) and NodeJs Server. Since the Node Server is available,  it can be used as a development server to deploy the project files.

Create a project with NPM (Node Package Manager)

Creating the Project directory.

mkdir sample-npm-project

 

In order to manage the project with NPM, execute the ‘npm init‘ command inside the project directory.

cd sample-npm-project  

npm init

 

This will initialize the NPM (Node Package Manager) support for the project. In other words, the project will be managed by the NPM .  Then you can NPM to manage (install, remove and update) dependencies of the project.

After executing the npm init command, you will be required to provide answers for couple of questions that will be used to create and initialize the package.json file. If you dont provide the answers, the values that are displayed inside the parenthesis will be considered as the default values.  (Please refer the screenshot given below.)

Screen Shot 2018-05-24 at 11.46.47 PM.png

 

Once above command is successfully executed, the package.json file will be created for the project.  If you observe the above screenshot properly, you can see the initial content of the newly created package.json file.

In package.json, we can declare the project related dependencies (dev and production), commands and other configurations.

 

 

Install the webpack and babel dependencies. 

For the development purpose, we need following dependencies.

  • webpack
  • webpack-cli (command line utility)
  • webpack-dev-server (development server)
  • babel related dependencies (babel-loaderbabel-preset-env)

 

 

Why Webpack?

Webpack is a tool that helps to bundle the resources of the application (e.g:- css files, javascript files) into a single file that can be imported to the HTML code.  In addition to the bundling, it provides the support for transformation of the files.

E.g:- transforming ES6 javascript into ES6 with babel-loader.

So the webpack will make sure that ES6 code will compiled/transformed into the ES5 syntaxes. In addition, it will bundles the resource files (CSS, JavaScript etc..) of each component into a single file.

webpack-cli is a command line utility that helps to generate the webpack configuration file (webpack.config.js) and execute the webpack commands in command line.

 

 

Babel  (babel-loader)

Babel is a JavaScript transpiler (or known as javascript compiler). Babel enables us to write modern JavaScript (ES6+)  that will be “transpiled” to widely-supported ES5 JavaScript. We call this process as “transpiling”.

Babel is responsible for transpiling ES6 code into ES5 code. Since we are running the babel as a loader in webpack, we need to install babel-loader dependency.  babel-loader is the webpack plugin for babel.

 

 

Babel Presets

In addition to the babel-loader, we need to add the following babel-preset for the project.

  • babel-preset-env :-  will enable the required features to detect the ES version of the source files and enable the traspiling of ES6+ based source to ES5  based source file.

If you want to know more about presets, please go through the following section.

 

 

What is the purpose of barbel preset?

presets are plugins that enable the features and support for particular language. For example, If the JavaScript code is based on ES6, we need to tell the babel transpiler that the source code is based on ES2015. So it will enables the required features for transforming the ES6 code to ES5.  if the source codes is based on ReactJs, we need to enable the babel-react-preset.

For more information about “preset”, please visit the official website.

https://www.npmjs.com/package/babel-preset-env

https://babeljs.io/docs/plugins/#presets 

 

Why do we enable “babel-preset-env” without enabling “babel-preset-es2015” ?

This is a good point. This preset will automatically detect the ECMAScript version (ES version) of your source code and enable the related features for compiling the source code into ES5 version.

babel-preset-env is the latest babel preset that compiles ES2015+ (ES6, ES7, ES8 ) down to ES5 by automatically determining the Babel plugins needed based on your targeted browser or runtime environments.

Without any configuration options, babel-preset-env behaves exactly the same as babel-preset-latest (or babel-preset-es2015babel-preset-es2016, and babel-preset-es2017 together).

In our case, we are trying to compile the ES6 code into ES5. So here babel-preset-env can be used.

The following command can be used to install the development related dependencies described above.

npm install \
 webpack \
 webpack-cli \
 webpack-dev-server \
 babel-loader \
 babel-preset-env \
 --save-dev

 

Please refer the screenshot given below.

Screen Shot 2018-05-25 at 12.30.10 AM.png

 

Then you can see that it is added to the devDependencies section of the package.json file.

"devDependencies": {
  "babel-loader": "^7.1.4",
  "babel-preset-env": "^1.7.0",
  "webpack": "^4.8.3",
  "webpack-cli": "^2.1.3",
  "webpack-dev-server": "^3.1.4"
}

 

Now we have installed, the production and development related dependencies for the project.  Now we will generate the webpack configuration file with webpack-cli tool.

 

 

Generating the Webpack configuration file (webpack.config.js) with webpack-cli

I have written a separate article on generating webpack configuration file using webpack-cli utility. You can follow that article for more information.

Click here to go to the article on generating webpack.config.js with webpack-cli. 

For this article, i will run only the required steps to generate the configuration file.

npx webpack init

 

Then provide the answers for the questions asked based on your project related details.

Screen Shot 2018-05-21 at 2.35.07 PM.png

Now you have the generated webpack configuration file in the root of the project directory. This is just an initial version and you can make any amendment or configuration change.

Here what i have changed.

  • Import the ‘path’ library
  • adding the ‘presets
  • changing some of the resource paths
  • adding the webpack-dev-server configuration.

 

Here  is the finalized version of the webpack configuration file used in this article.

 

 

Adding the webpack-dev-server configuration.

If you observer the above configuration file, you can notice that we have configured the webpack-dev-server as follows.

devServer: {
    contentBase: path.join(__dirname, "dist/"),
    port: 9000
},

 

contentBase:- Tell the server where to serve content from.

port: development Server will be up and running on port 9000.

The official documentation of the dev server can be found at:-https://webpack.js.org/configuration/dev-server/

 

Here we have created NPM (Node Package Manager) managed project and configure Babel and Webpack as development dependencies.  You can use this project as a  reference template for any NPM managed project.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s