Taming ModulesECMA: Module Syntax/Semantics

WHATWG: Module Loaders

Browser: Global Modules

<script src = ‘lib/firebase.js'></script>

<script src = 'http://cdn/jquery.js'></script>

Node/NPM: require()

var gulp = require('gulp');

var concat = require('gulp-concat');

Module Systems: Legacy & ES6

• Legacy:

• Global

• CommonJS

• AMD

• ES6:

• System

Huge incompatibility / interoperability problem

ES6 Import

ES6 Export

But No Module Loaders!

Babel:

What a mess!

• NPM: Browserify, Babelify

• RequireJS

• WebPack

• JSPM

• Bundling

• Transpiling

• .. and more

Standards Track, Whew

• The System Object

Github: System Polyfill

The System Object

• Mainly importing: (Transitive Closure)

And a bit more

Simple: Goal

Solution

• Babel:

• babel-cli

• babel-plugin-transform-es2015-modules-systemjs

• System: Download or NPM install

• App: <script src="system.js"></script> .. and <script> System.import('lib/main'); </script>

Test

• main:

• square:

• sqrt:

Babel: main

Babel: square

Babel: sqrt