Upload
abdurrachman-mappuji
View
34
Download
0
Embed Size (px)
Citation preview
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