#JavaScript/Learning/es6
Here is a quick and simple guide on how to get an ES6 Environment up and running.
What is ES6?
ES6 = 6th addition of JS
Not all browsers are compatible with es6. This is why we must use babel and web pack.
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
Web Pack is a bundler for modules. Web Pack allows us to create an environment for babel.
Benefits of using Web Pack:
- Bundles modules into one JS file.
- Comes with a dev server.
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 https://gist.github.com/b7e880a1534c756597fd70e129199d2d
Index.html Copy and paste the following: https://gist.github.com/0c3281d93f07e5ef6192783778c93fbd
index.js Copy and paste the following: https://gist.github.com/fda0b337be8525c1a7049536e41ab471
webpack.config.js: Copy and paste the following: https://gist.github.com/431047430c4647ea5da148ec954394b1
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 you webpack.config.js file if another program or server is running on that port.