pinoyprogammer
Techie
Hi there, today I will teach how to prepare a project template and configure Babel to start working on your ES6 projects. I’ll assume that you know the basics of Node.js and NPM, you’ll need to have a stable internet connection so that downloading the required modules would be a breeze to you
What is ES6?
ES6, or ECMAScript2015, is the current version of the ECMAScript specification standard aka the new version of JavaScript. Support for these ES6 features is on its way in modern browsers though it will take time for it to be fully supported but that won’t stop us to start using ES6! Introducing Babel.
What is Babel?
Babel is a transpiler, it takes ES6 source codes and compiles (eg. translates) it to ES5 so that the code can run on all modern browsers.
But there’s TypeScript, why use Babel instead?
You may argue that it is a matter of preference, and I agree but hear me out. Babel has no abstraction or type checking but it supports large chunks of the ES6 specification and they release updates fast.
The key factor that distinguishes TypeScript from Babel is that it is a superset of JavaScript (eg. JavaScript, batteries included), and strong type checking.
If you want the benefits of both worlds, you can use Babel to transpile TypeScript’s output, this gives you strong type checking and IntelliSense in Visual Studio, or whatever IDE you’re using, and Babel’s great ES6 specification support.
Getting Started
Let’s begin by installing Node.js, if you’re on Windows there are binaries available from their official website. I recommend installing the LTS version but feel free to install the current build to get the latest features available.
After installing and confirming that Node.js and NPM (if you installed Node.js through the binary installer, you should have NPM installed too) works, let’s start setting up our project structure.
Alright, let’s install Babel.
Let me explain what those two packages are, babel-cli is a command-line tool to compile files with babel, babel-preset-es2015 tells Babel to compile ES6 scripts to ES5.
Now let’s configure babel and package.json for ES6 development. Starting with the package.json, add the following scripts.
build tells babel to compile all the source files inside the src/ and put the output to our root directory, the --sourcemaps option makes it easier to debug our scripts in browser devtools ex. Chrome DevTools, learn more about sourcemaps in Sentry’s blog entry.
pretest runs the build script first whenever you fire up the test script, this is to make sure that the source files are compiled first else an error will pop-up saying that index.js doesn’t exists or something like that.
Okay, let’s try this out, create a .js file inside the src/ directory with this code:
That code uses two of ES6’s features, const which declares a constant and an arrow function which is a short-hand for anonymous functions. Now let’s test this out.
Awesome! That’s it, you now have a barebones ES6 project template. Here’s a bonus, let’s install and configure feross/standard to format-check our codes.
And inside your package.json, configure standard to use babel-eslint when parsing our codes, this allows standard to check the format of our code including ES6 features.
To use standard, just issue the standard command. Make sure to clean your directory eg. delete output files.
Conclusion
Babel is one of many transpilers out there but it is the popular of the most, it’s popularity suggests that many developers are warmly embracing the ES6 specification and are eager to use it as soon as possible.
Though there may still be issues such as compatibility with your existing libraries or tests, as for client-side development, I wish that there won’t be any problems with cross-browser support when ES6 is implemented on most browsers, thankfully, Babel takes this issue out of the window.
That’s it for today, I hope that you will embrace the ES6 specification soon, better prepared than late.
One more thing, for those having trouble installing modules due to connectivity issues, I’ve prepared a project template that you can use. The modules are already installed and configured, all you have to do is write codes.
What is ES6?
ES6, or ECMAScript2015, is the current version of the ECMAScript specification standard aka the new version of JavaScript. Support for these ES6 features is on its way in modern browsers though it will take time for it to be fully supported but that won’t stop us to start using ES6! Introducing Babel.
What is Babel?
Babel is a transpiler, it takes ES6 source codes and compiles (eg. translates) it to ES5 so that the code can run on all modern browsers.
But there’s TypeScript, why use Babel instead?
You may argue that it is a matter of preference, and I agree but hear me out. Babel has no abstraction or type checking but it supports large chunks of the ES6 specification and they release updates fast.
The key factor that distinguishes TypeScript from Babel is that it is a superset of JavaScript (eg. JavaScript, batteries included), and strong type checking.
If you want the benefits of both worlds, you can use Babel to transpile TypeScript’s output, this gives you strong type checking and IntelliSense in Visual Studio, or whatever IDE you’re using, and Babel’s great ES6 specification support.
Getting Started
Let’s begin by installing Node.js, if you’re on Windows there are binaries available from their official website. I recommend installing the LTS version but feel free to install the current build to get the latest features available.
Code:
$ pacman -S nodejs npm
$ node -v
v6.3.0
$ npm -v
3.10.5After installing and confirming that Node.js and NPM (if you installed Node.js through the binary installer, you should have NPM installed too) works, let’s start setting up our project structure.
Code:
$ mkdir ~/es6-template && cd ~/es6-template
$ mkdir src
$ npm initAlright, let’s install Babel.
Code:
$ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-es2015Let me explain what those two packages are, babel-cli is a command-line tool to compile files with babel, babel-preset-es2015 tells Babel to compile ES6 scripts to ES5.
Now let’s configure babel and package.json for ES6 development. Starting with the package.json, add the following scripts.
Code:
"scripts": {
"build": "babel src -d ./ --sourcemaps inline",
"pretest": "npm run-script build",
"test": "node index.js"
}build tells babel to compile all the source files inside the src/ and put the output to our root directory, the --sourcemaps option makes it easier to debug our scripts in browser devtools ex. Chrome DevTools, learn more about sourcemaps in Sentry’s blog entry.
pretest runs the build script first whenever you fire up the test script, this is to make sure that the source files are compiled first else an error will pop-up saying that index.js doesn’t exists or something like that.
Okay, let’s try this out, create a .js file inside the src/ directory with this code:
Code:
const square = n => n * n;
console.log(square(3));That code uses two of ES6’s features, const which declares a constant and an arrow function which is a short-hand for anonymous functions. Now let’s test this out.
Code:
$ npm test
> [email protected] pretest /home/torres.wade92/projects/es6-template
> npm run-script build
> [email protected] build /home/torres.wade92/projects/es6-template
> babel src -d ./ --source-maps inline
src\index.js -> index.js
> [email protected] test /home/torres.wade92/projects/es6-template
> node index.js
9Awesome! That’s it, you now have a barebones ES6 project template. Here’s a bonus, let’s install and configure feross/standard to format-check our codes.
Code:
$ npm install --save-dev standard
$ npm install --save-dev babel-eslintAnd inside your package.json, configure standard to use babel-eslint when parsing our codes, this allows standard to check the format of our code including ES6 features.
Code:
"standard": {
"parser": "babel-eslint"
}To use standard, just issue the standard command. Make sure to clean your directory eg. delete output files.
Code:
$ standard
standard: Use JavaScript Standard Style (http://standardjs.com)
/home/torres.wade92/projects/es6-template/src/index.js:1:16: Expected parentheses around arrow function argument.
/home/torres.wade92/projects/es6-template/src/index.js:1:26: Extra semicolon.
/home/torres.wade92/projects/es6-template/src/index.js:3:2: Newline required at end of file but not found.
/home/torres.wade92/projects/es6-template/src/index.js:3:23: Extra semicolon.Conclusion
Babel is one of many transpilers out there but it is the popular of the most, it’s popularity suggests that many developers are warmly embracing the ES6 specification and are eager to use it as soon as possible.
Though there may still be issues such as compatibility with your existing libraries or tests, as for client-side development, I wish that there won’t be any problems with cross-browser support when ES6 is implemented on most browsers, thankfully, Babel takes this issue out of the window.
That’s it for today, I hope that you will embrace the ES6 specification soon, better prepared than late.
One more thing, for those having trouble installing modules due to connectivity issues, I’ve prepared a project template that you can use. The modules are already installed and configured, all you have to do is write codes.