Configuring
Damian Mullins
6
Preparing the workspace
package.json
Create package.json file
npm init
npm install babel-cli -save-dev
"scripts": {}
"build": "babel src --out-dir dist"
{
"scripts": {
"build": "babel src --out-dir dist"
},
"devDependencies": {
"babel-cli": "^6.5.1"
}
}
Install babel-cli package
Add "scripts" object
Add "build" script
Workspace
mkdir src
Create "src" directory
function sayHello(name = 'World') {
return `Hello ${name}!`;
}
function sayGoodbye(name = 'World') {
return `Goodbye ${name}!`;
}
var helloKeith = sayHello('Keith');
var goodbyeKeith = sayGoodbye('Keith');
console.log(helloKeith);
console.log(goodbyeKeith);
Add "index.js" script
Let's transpile!
Run the npm script
npm run build
> @ build c:\babel
> babel src --out-dir dist
src\index.js -> dist\index.js
ES5
function sayHello(name = 'World') {
return `Hello ${name}!`;
}
function sayGoodbye(name = 'World') {
return `Goodbye ${name}!`;
}
var helloKeith = sayHello('Keith');
var goodbyeKeith = sayGoodbye('Keith');
console.log(helloKeith);
console.log(goodbyeKeith);
FTW!
Wait...?
Nothing happened
The setup section on the Babel website provides the answer:
Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x does not ship with any transformations enabled. You need to explicitly tell it what transformations to run.
H?!
T
W
In this futuristic land of Babel 6 no transformations are applied by default; plugins are now opt-in which explains why the code remained the same!
That's great and all but how do we tell Babel to transform our code?
Diagnosing problems with the Doctor
A nice way to tell if there are any issues with our Babel setup is to run the "babel-doctor" command which is part of babel-cli
"doctor": "babel-doctor"
Add "doctor" to package.json scripts
npm run doctor
Run
× Found no .babelrc config
√ No duplicate babel packages found
√ All babel packages appear to be up to date
√ You're on npm >=3.3.0
Ahh so we're missing a configuration file, .babelrc, in which we can specify Babel API options.
The diagnosis
Configuration
.babelrc
Let's create a .babelrc file in the root of the project, adding an empty object as the content
{}
Configuring plugins
To enable transformation of the default parameters we need to add the ES2015 parameters transform.
Add the parameters transform plugin
npm i babel-plugin-transform-es2015-parameters -D
Add the template literals transform plugin
npm i babel-plugin-transform-es2015-template-literals -D
Adding plugins to config
So now we have some plugins installed let's add them to the .babelrc config file.
{
"plugins": [
"transform-es2015-parameters",
"transform-es2015-template-literals"
]
}
Run the npm script
npm run build
> @ build c:\babel
> babel src --out-dir dist
src\index.js -> dist\index.js
ES5
function sayHello() {
var name = arguments.length <= 0 || arguments[0] === undefined ? 'World' : arguments[0];
return 'Hello ' + name + '!';
}
function sayGoodbye() {
var name = arguments.length <= 0 || arguments[0] === undefined ? 'World' : arguments[0];
return 'Goodbye ' + name + '!';
}
var helloKeith = sayHello('Keith');
var goodbyeKeith = sayGoodbye('Keith');
console.log(helloKeith);
console.log(goodbyeKeith);
FTW!
The Power of the Preset
As you can probably tell this would quickly become very time consuming as you start using more es2015 features. Let's look at how to simplify our workflow.
As well as specifying each package individually, giving us full control over what is transforms, we can also use presets.
Presets group together a bunch of plugins, for example the es2015 preset contains everything we need in order to transform es2015 features.
Adding a preset
Add the es2015 preset by running
Add the preset to the .babelrc file
npm i babel-preset-es2015 -D
{
"presets": ["es2015"]
}
Run the NPM script
'use strict';
function sayHello() {
var name = arguments.length <= 0 || arguments[0] === undefined ? 'World' : arguments[0];
return 'Hello ' + name + '!';
}
function sayGoodbye() {
var name = arguments.length <= 0 || arguments[0] === undefined ? 'World' : arguments[0];
return 'Goodbye ' + name + '!';
}
var helloKeith = sayHello('Keith');
var goodbyeKeith = sayGoodbye('Keith');
console.log(helloKeith);
console.log(goodbyeKeith);
Configuring plugins
There are other presets available from the Babel website such as one for each ECMAScript stage, and one for React.
There are a lot more available on NPM.
Damian Mullins
Short tutorial available at github.com/DJMelonz/starting-out-with-babel