Welcome to Part 6 of this review of the Pluralsight course “Creating a JavaScript Development Environment” by Cory House.

Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.

He believes in clean code, pragmatic development, and responsive native UIs.

He has also created reactjsconsulting.com, and has the authored Pluralsight courses including Building Applications with React and Flux and Building Applications with React and Redux in ES6.

Also in this series:
Part 1 – You Need a Starter Kit
Part 2 – Editors and Configuration
Part 3 – Package Management
Part 4 – Development Web Server
Part 5 – Automation
Part 6 – Transpiling
Part 7 – Bundling
Part 8 – Linting
Part 9 – Testing and Continuous Integration
Part 10 – HTTP Calls
Part 11 – Project Structure
Part 12 – Production Build
Part 13 – Production Deploy

Transpiling

JavaScript Versions

We see a chart showing every version of JavaScript and the year each version was approved by TC39. JavaScript was actually created in 1995, but not standardised until 1997.

Transpilers

Cory says there are over 100 languages that compile down to JavaScript. The standout options (and I agree with these) are Babel, TypeScript and Elm.

Babel gives us modern standards-based JavaScript today.

TypeScript is sort of a Superset of JavaScript (there are some caveats). Learn more about by looking at Practical TypeScript Migration or
What New in TypeScript?

Cory lists the merits of TypeScript over Babel and vice versa. He likes both but will use Babel in this course as it is the most popular.

We also learn a bit about the benefits of Elm. It compiles down to JS, has a clean syntax and immutable data structures. Best of all, all errors are compile-time errors.

Babel Configuration

There are two methods for configuration: a .babelrc file and a package.json file.

Cory discusses the applications that run on Node or Electron. These environments have good ES6 support so do not need much in the way of transpilation in order to run modern JavaScript correctly.

It is best to only transpile the features that our target environment does not understand. Cory mentions babel-preset-es2015-node and babel-preset-latest-minimal.

Transpiling Build Scripts

Should we transpile our build scripts? Cory discusses the pros and cons. In this course we’ll transpile the build scripts as well.

Demo: Set Up Babel

We create a .babelrc with the “latest” preset, which means we get to use all the latest standard JS features.

startMessage.js and srcServer.js are updated to use ES6 imports.