JavaScript Transpiling Start using ES6/7 with Babel
Example
Browser support for ES6 is growing, but to be sure your code will work on environments that dont fully support it, you can use Babel, the ES6/7 to ES5 transpiler, try it out!
If you would like to use ES6/7 in your projects without having to worry about compatibility, you can use Node and Babel CLI
Quick setup of a project with Babel for ES6/7 support
- Download and install Node
- Go to a folder and create a project using your favourite command line tool
~ npm init
- Install Babel CLI
~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015
- Create a
scriptsfolder to store your.jsfiles, and then adist/scriptsfolder where the transpiled fully compatible files will be stored. - Create a
.babelrcfile in the root folder of your project, and write this on it
{
"presets": ["es2015"]
}
- Edit your
package.jsonfile (created when you rannpm init) and add thebuildscript to thescriptsproperty:
{
...
"scripts": {
... ,
"build": "babel scripts --out-dir dist/scripts"
},
...
}
- Enjoy programming in ES6/7
- Run the following to transpile all your files to ES5
~ npm run build
For more complex projects you might want to take a look at Gulp or Webpack
