This post is an update to my old tutorial on how to start writing ES6 on the front end with babel.
The example on the previous post won’t work anymore because babel changed the way it works, and now requires you to download additional plugins for the languages you want to compile (i.e. JSX, ES6). The plugins needed for babel to work now are called presets.
Get Started
Download this example from my github repo to quickly get started with something that works. Follow the instructions in the repo's "README.md" and you're good. All you need to do is typenpm start in your terminal once you have everything downloaded and it will run the example.
You can change things and they will compile because the gulp task runner is running and watching for changes to compile with babel.
Once you have the example up and running, you are free to try out any ES6 feature.
An alternative way to try out ES6 if you just want to mess around with it is to use jsfiddle. Just choose "Babel" as the language instead of the default "javascript". The downside with jsfiddle is that you can't really try out imports, nor can you actually build something and host it. Downloading my example as your base is a better option in the long run.
.babelrc
If you downloaded the repo you will notice there is a ".babelrc" file in the root. This file is basically a resource configuration file for babel. It can for example tell babel which presets to use. In our case, we have to use the "es2015" preset. The npm package is called "babel-preset-es2015" but don't worry, it's already there if you ran "npm install".Gulp
If you don't know what gulp is, check out this post on task runners. There's a few changes to the gulp file compared to the one in my old tutorial but it basically remains the same: compile all js when there is a change and bundle it together.var gulp = require('gulp');
var fs = require("fs");
var browserify = require("browserify");
var babelify = require("babelify");
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');
// Lets bring es6 to es5 with this.
// Babel - converts ES6 code to ES5 - however it doesn't handle imports.
// Browserify - crawls your code for dependencies and packages them up
// into one file. can have plugins.
// Babelify - a babel plugin for browserify, to make browserify
// handle es6 including imports.
gulp.task('es6', function() {
browserify({ debug: true })
.transform(babelify)
.require("./app/app.js", { entry: true })
.bundle()
.on('error',gutil.log)
.pipe(source('bundle.js'))
.pipe(gulp.dest('./'));
});
gulp.task('watch',function() {
gulp.watch(['./app/**/*.js'],['es6'])
});
gulp.task('default', ['es6','watch']);
The only difference from the old one is that now running "gulp" will first run the "es6" task and THEN start watching.
HTML and JS files
The rest of the files are the same as my old tutorial. The HTML file will include the bundle.js script. The script contains everything we need to run the app.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ES6</title> </head> <body> <h1>Nothing here, check the console!</h1> <!-- One script to rule them all --> <script src="/bundle.js"></script> </body> </html>The app.js file contains the import we later use to log in to the console.
// example import import ExampleClass from "./ExampleClass"; // block scope let e = new ExampleClass(); e.sayHello();The ExampleClass.js file contains an example of an exportable ES6 class.
export default class ExampleClass {
constructor () {
this.hello = "hello world";
}
sayHello () {
console.log(this.hello);
}
}
Leave a Reply