These are my notes based on the phenomenal tutorial by Kent C. Dodds hosted by egghead.io both of which are my go to sources when I want to learn something new. I highly suggest you sign up for the pro subscription.
Part 6: Adding ES6 Support
We need to add babel-cli to our dev dependencies:
$ npm i -D babel-cli
The Docs
Common uses:
babel -w -o //watch for file changes and output
babel src -o // compile entire src dir and concat
babel src -d lib //compile entire src dir and output to lib
babel --ignore //add this to ignore files i.e. tests
Next we will add a build script for babel. Looking in our node_modules/bin we can see babel has been added making it available to npm for scripts. Let’s edit our package.json to include:
"build": "babel --out-dir dist src”
Now let’s test it to see what gets generated when we run our script. In your terminal run:
$ npm run build
Look in the dist directory and you will see that it was created and files were moved over. It also added our test files! This is something we don’t want to push to the dist since if we test when we publish, not when we consume. We can solve this by adding an ignore flag:
“build”: ''babel --out-dir dist --ignore *.test.js src"
Since this creates a dist directory with files in it, we want to make sure that if we make a change in a filename that the old one is not present in the next build in order to delete the directory cleanly we will add a prebuild script to package.json
"prebuild": "rm -rf dist”
However this is only *nix supported in order to allow windows devs to use this we must add a new dev package called rimraf a cross-platform rm -rf built for node.
$ npm i -D rimraf
replace rm-rf with rimraf:
"prebuild": "rimraf dist”
now convert to es6 i.e.:
'use strict'
//require external dependencies
import uniqueRandomArray from 'unique-random-array';
import _ from 'lodash';
//define available data
import firstNames from '../data/first-names.json';
import middleNames from '../data/middle-names.json';
import lastNames from '../data/last-names.json';
//random generators
let randomFirstName = uniqueRandomArray(firstNames);
let randomMiddleName = uniqueRandomArray(middleNames);
let randomLastName = uniqueRandomArray(lastNames);
//filter functions
const filteredNames = function (nameList, initial) {
return nameList.filter(function (name) {
return name[0] === initial;
})
};
//methods
const list = ()=>{
let allNames = ["FirstName MiddleName LastName"];
for (var i = 0; i < firstNames.length; i++) {
//Math.floor((Math.random() * 10) + 1);
var tmpName = randomFirstName() + ' ' + randomMiddleName() + ' ' + randomLastName();
allNames.push(tmpName);
}
return allNames;
};
const single = ()=>{
return randomFirstName() + ' ' + randomMiddleName() + ' ' + randomLastName();
};
const startsWithLetter = (f, m, l)=>{
var firstName = _.sample(filteredNames(firstNames, f));
var middleName = _.sample(filteredNames(middleNames, m));
var lastName = _.sample(filteredNames(lastNames, l));
return firstName + ' ' + middleName + ' ' + lastName;
}
const numberOfNames = (number=1, allNames=[])=>{
for (var i = 0; i < number; i++) {
var tmpName = randomFirstName() + ' ' + randomMiddleName() + ' ' + randomLastName();
allNames.push(tmpName);
}
return allNames;
}
//available methods
module.exports = {
list: list,
single: single,
startsWithLetter: startsWithLetter,
numberOfNames: numberOfNames
}
Now lets run our build script again:
$ npm run build
Now let’s take a look at index.js in dist and notice nothing happened! That is because really all we did was have it copy it over. We did not tell it to do anything! So we need to install some presets to tell babel how to do the transpiling:
npm i -D babel-preset-es2015 babel-preset-stage-2
Learn more about presets
In order for babel to know about these presets we have added we need to change our package.json to reflect this:
"babel": {
"presets": [
"es2015",
"stage-2"
]
}
We need to change our package.json file to point to dist now:
"main": "dist/index.js",
While we are here we should update the build script by adding –copy-files:
"build:main": "babel --copy-files --out-dir dist --ignore *.test.js src",
Now we need to make sure the build script runs before the publish script. We do this by modifying the .travis.yml file scripts section, after check-coverage add:
- npm run build
Now we need to do a little verification on our changes. Let’s run a command to see what will actually be published:
$ npm pack
A file was generated ending in tgz. Open that up and take a peek. It looks alright, but there are just some extra files in there that we might not need or want. So let’s learn how to limit what gets packed up. We do this by adding a files section to our package.json file:
"files": [
"dist",
"data",
"README.md"
],
Now that we are writing in ES6 we want to make sure that all of the other pieces are able to work with the new syntax as well. Let’s start with istanbul. It turns out we need a replacement package for that called nyc.
$ npm i -D nyc
Now we need to update package.json to use this new method:
"check-coverage": "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
Next in the test with the watch command (-w) we want to add in something that will transpile our code.
"test:watch": "mocha src/index.test.js --compilers js:babel-register -w",
Since we are using it we might as well install it!
npm i -D babel-register
The tests are getting a little clunky, with a lot of repeated code so we are going to clean things up a bit. by letting the watch test just fire off the regular test adding in a -w flag.
"test:watch": "npm t -- -w",
"test": "mocha src/index.test.js --compilers js:babel-register",
Note the double dash in the watch script. This allows you to send in the watch flag to the previous call as if it were in the original. Since we are cleaning things up let’s go a little farther, but adding a cover script.
"cover": "nyc --reporter=lcov npm t",
We now need to adjust our githook.
"config": {
"ghooks": {
"pre-commit": "npm run cover && npm run check-coverage"
}
One more spot in .travis.yml we need to make sure we run our cover script so it ends up looking like:
script:
- npm run cover
- npm run check-coverage
- npm run build
There we go! We now have an es6 friendly set up!
Next… UMD Build!
= Time Saving Idea
= Pro Tip
= Note
= Alert
= Code Update
= A Closer Look
JS and John 