ES6 Development Environment Setup

Currently most browsers are not giving support for all the new features of ES6 (see compatibility table). So You need to use a compiler(transpiler) to transform your ES 6 code to ES 5 compatible code.

NPM

NPM is a package manager that allows you to install libraries into your project easily. www.npmjs.com hosts thousands of free packages to download and use. The NPM program is installed on your computer when you install Node.

A package in Node contains all the files you need for a module. Modules are JavaScript libraries you can include in your project.

Babel

Babel is a transpiler that just converts the code from ES6 to ES5 to support all modern browsers. Babel can also compile other versions of ECMAScript as well as React’s JSX, but that is beyond the scope of this series. For more information, please visit this official BabelJS website. https://babeljs.io/

Webpack

Webpack is module bundle for modern JavaScript web applications. Using webpack, we do not host multiple JavaScript files. We just host one file for an entire web application.

This is important to understand, as Webpack does not run during your page, it runs during your development.

For More information, please visit this official Webpack website. https://webpack.github.io/docs/