package.json # npm
node_modules
es6 # Node source
dist
public/ # browser source
es6/
dist/
The Transcompilers
As I write this, the two most popular transcompilers are
. I have
used both, and they are both quite capable and easy to use. I am currently leaning
slightly toward Babel, and we’ll be using it as the transcompiler in this book. So let’s
get started!
Babel started as a ES5 to ES6 transcompiler, and has grown to be a general-purpose
transcompiler that’s capable of many different transformations, including ES6, React,
and even ES7. Starting with version 6 of Babel, transformations are no longer
included with Babel. To perform our ES5 to ES6 transformation, we need to install
the ES6 transformations and configure Babel to use them. We make these settings
local to our project, as it is conceivable that we’ll want to use ES6 on one project,
React on another, and ES7 (or some other variant) on another. First, we install the
ES6 (aka ES2015) preset:
$ npm install --save-dev babel-preset-es2015
Then we create a file in our project root called .babelrc (the leading period indicates
the file should be normally hidden). The contents of this file are:
{ "presets": ["es2015"] }
With this file in place, any use of Babel in this project recognizes that you’re using
ES6.
Running Babel with Gulp
Now we can use Gulp to do something actually useful: convert the ES6 code we’ll be
writing to portable ES5 code. We’ll convert any code in es6 and public/es6 to ES5 code
in dist and public/dist. We’ll be using a package called
gulp-babel
, so we start by
installing it with
npm install --save-dev gulp-babel
. Then we edit
gulpfile.js:
const
gulp
=
require
(
'gulp'
);
const
babel
=
require
(
'gulp-babel'
);
gulp
.
task
(
'default'
,
function
() {
// Node source
The Transcompilers | 25
