Learning ES6 — Setup your environment
Here is a quick and simple guide on how to get an ES6 Environment up and running with Babel and Webpack.
Quick notes:
What is ES6?
ES6 = 6th addition of JS
Not all browsers are compatible with es6. This is why we must use babel and webpack.
Why Babel?
Babel is a transpiler. Transpilers read code in one version and spit it out in another version. Babel is very popular and has become a standard tool in the industry. Babel takes ES6 and spits out es5 code.
Give babel a try here: babeljs.io
Why Webpack?
Wepack is a bundler for modules. Web Pack allows us to create an environment for babel.
Benefits of using Wepack:
- Bundles modules into one JS file.
- Comes with a dev server.
How to set up an Webpack/babel environment
This guide assumes that you already have Node.js and npm installed on your machine.
Open a terminal: Type the following in order:
mkdir es6 cd es6 npm init -y npm install — save-dev webpack npm install babel-core babel-loader webpack-dev-server babel-preset-es2015 babel-polyfill — save-dev
Open Text editor:
Create new folder : ‘build’ Create new folder : ‘app’ Create new file : build/index.html Create new file : app/index.js Create new file @ root directory: webpack.config.js
Here is the code you should have in your files.
package.json
Adjust your file to look like the code below. You should only need to adjust the scripts and babel sections
Index.html
Copy and paste the following:
index.js
Copy and paste the following:
webpack.config.js:
Copy and paste the following:
Once all your files have been created, start up your server by typing in terminal:
npm start
Your server will be available at http://localhost:3333 . The default port number is usually something like 3000. You will want to change this to something else (like: 3333) in your webpack.config.js file if another program or server is running on that port.
Once you localhost open in your browser, open console and check for your Hello World message.
