Craig McKeachie - Babel Get Startedby

DEVELOPER, TRAINER, AUTHOR

@cmckeachie www.funnyant.com

Babel: Get Started

Craig D. McKeachie

BASICS OF USING BABEL

Overview Understanding Babel

Installation and configuration

Module formatters

Understanding Babel

Comparisons

Comparison

Traceur Babel

Experimental

Runtime dependency

Removes comments and whitespace

Missing some features

Production

Minimal inline helpers/optional polyfills

Readable maintains source formatting

Feature rich

Comparison

TypeScript Babel

Language: Typed superset of JavaScript

Happens to have transpiler

More lenient, less spec compliant

Not a language

Transpiler

Spec compliant

Prerequisites & Environment

DEVELOPER, TRAINER, AUTHOR

@cmckeachie www.funnyant.com

Basics of Using Babel

Craig D. McKeachie

Installation

Babel Packages

babel-core babel-cli

babel-plugin-* babel-preset-*

Installing Babel Globally

$ npm install -global babel #version 5 $ npm install -global babel-cli

$ babel --version

Global Packages Location

$ npm ls -g --depth 0

Mac: /Users/[username]/.npm-packages/lib/node_modules

PC: %AppData%\npm\node_modules (Windows 7) %USERPROFILE%\Application Data\npm\node_modules (Windows XP)

Installing Babel Locally

$ npm init #creates package.json

$ npm install babel-cli --save-dev #saves in package.json

$ babel --version #fails because can't find package

$ node_modules/.bin/babel --version

Command Line Interface (CLI)

Configuration

Understanding Module Formatters

ModuleA module is a piece of reusable JavaScript: it exports certain objects which are thus made available to dependent code.

ECMAScript Module

// lib/math.js export function sum(x, y) { return x + y; } export var pi = 3.141593;

// app.js import {sum, pi} from "lib/math"; alert("2π = " + sum(pi, pi));

Module Specifications

AMD CommonJS

UMD SystemJS

Module FormatterA module formatter is a transformer that turns ES2015 module syntax (exports and imports) into their equivalent target module specification format.

ECMAScript Modules

AMD

CommonJS

UMD

SystemJS

Specification Implementations

AMD CommonJS

RequireJS

Dojo Toolkit

ScriptManJS

Node.js (on the server)

Browserify (in the browser)

Module Formatters Demo

Summary

Understanding Babel

- Compile to ES5

- Traceur and TypeScript

Installation and configuration

- npm

- .babelrc

Module formatters

- AMD, CommonJS

DEVELOPER, TRAINER, AUTHOR

@cmckeachie www.funnyant.com

Browser Support

Craig D. McKeachie

OverviewShims and polyfills

Project overview

Chrome support

IE9 support

IE8 support

ShimA shim refers to any piece of code that performs interception of an API call and provides a layer of abstraction.

PolyfillA polyfill is a type of shim that retrofits legacy browsers with modern HTML/CSS/JavaScript features (browser APIs) usually using Javascript.

if (!Function.prototype.bind) { Function.prototype.bind = ... ; }

Polyfill

$ npm install babel-polyfill

Babel Polyfill

Babel Polyfill

core-js

Scope

- ES5, ES6, ES7

- not just safe parts of spec

Modular

No global namespace pollution

ES Shims

Scope

- just safe parts of spec

- just ES5 or just ES6

Not as modular

Pollute global namespace

Regeneratortakes proposed syntax

for generators/yield

and transforms to ES5

ECMAScript Versions

ES3 ES5

IE8+

CH5+

FF3+

SF4+

IE9+

CH6-19+

FF4+

SF5-6+

ECMAScript Versions

ES3 ES5

Babel polyfill

Plugin: es3-member-expression-literals

Plugin: s3-member-property-literals

Other Plugins:

object-set-prototype-of-to-assign

Babel polyfill

Demo All ES2015 features in the

latest version of Chrome to IE8

- before polyfill and transpiling

- with polyfill

- transpiled

Summary Babel polyfill

Project overview

Chrome, IE9, IE8 support

DEVELOPER, TRAINER, AUTHOR

@cmckeachie www.funnyant.com

Babel in Your Build

Craig D. McKeachie

Overview

Build Automation

• Npm scripts

• Gulp

• Grunt

Module Loaders

• Webpack

• Browserify

Frameworks

• React.js

Babel with npm Scripts

npm Scripts

Included in package.json

Like batch file or bash script

Run local node packages w/out path

Easy to learn

//package.json

"scripts": { "test": "echo \"Error: no test specified\" && exit 1" }

$ npm run-script test

npm Scripts

$ npm run-script [script-name] $ npm run [script-name]

npm ScriptsShortcuts

$ npm run-script test $ npm run test $ npm test

npm ScriptsShortcuts

Works for test, start, stop, restart

Babel with Gulp

Babel with Grunt

Babel with Webpack

Babel with Browserify

Babel with React

Summary

Build Automation Module Loaders Frameworks

DEVELOPER, TRAINER, AUTHOR

@cmckeachie www.funnyant.com

Babel with Node.js and Unit Tests

Craig D. McKeachie

Overview

Node.js

• Babel-node

• Require hook

• Command-line interface (CLI)

• Babel runtime

Unit Testing

• Jasmine

• Mocha

Summary

Node.js Unit Tests

Babel-node

Require hook

Command-line interface

Babel runtime

Jasmine

Mocha

Babel-Node

Require Hook

Command-line Interface (CLI)

Babel Runtime

Babel with Jasmine

Babel with Mocha

Babel RuntimeES2015 environment

No global namespace pollution

DEVELOPER, TRAINER, AUTHOR

@cmckeachie www.funnyant.com

Babel: Get Started

Craig D. McKeachie

CONCLUSION