es6 modules-and-bundlers
TRANSCRIPT
• What is a module
Table of Content
• Before ES6 modules • ES6 modules• Export statement• Import statement• Webpack• Rollup.js
What is a module
A module is like a chapter for a book.
A module is like a brick for your application.
Before ES6 modules
Anonymous closureGlobal importsRevealing module patternCommonjs module patternAMD patternUMD pattern
Anonymous closure
// global function function showUsers(users){ users.map(function(user){ console.log(user); }); }
(function () { // body of our module var users = ['mohamed', 'karim', 'amine']; showUsers(users); })();
Global imports
// global function function showUsers(users){ users.map(function(user){ console.log(user); }); }
(function (x) {
// body of our module var users = ['mohamed', 'karim', 'amine']; x(users);
})(showUsers);
Revealing module pattern
var myModule = (function () { // body of our module var users = ['mohamed', 'karim', 'amine'];
return { showUsers: function(){ users.map(function(user){ console.log(user); }); }, addUser: function(name){ users.push(name); } }
})(); myModule.showUsers();
Commonjs module pattern
var users = ['mohamed', 'karim', 'amine'];
module.exports = { showUsers: function(){ users.map(function(user){ console.log(user); }); }, addUser: function(name){ users.push(name); } }
Commonjs module pattern
var list = require('./commonjs-module-pattern');
list.showUsers(); list.addUser('algiers tech meetup'); console.log(Array(40).join('-')); list.showUsers();
// we can't access users. console.log('users are : ',list.users);
AMD pattern
// amd pattern simplified implimentation. function define(dependencies,cb){ var dependenciesArray = []; dependencies.map(function(dep){dependenciesArray.push(dep());}); cb.apply(null,dependenciesArray); } function dep1(){ console.log('dep1');return 'bingo';
} function dep2(){ console.log('dep2');return 'mingo'; } define([dep1,dep2],function(dep1,dep2){ console.log('dep1 returned : ',dep1); console.log('dep2 returned : ',dep2); })
UMD pattern
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['dep1', 'dep2'], factory); } else if (typeof exports === 'object') { // CommonJS module.exports = factory(require('dep1'), require('dep2')); } else { // Browser globals (Note: root is window) root.returnExports = factory(root.dep1, root.dep2); } }(this, function (dep1, dep2) { // Methods function notHelloOrGoodbye(){}; // A private method function hello(){}; // A public method because it's returned (see below) function goodbye(){}; // A public method because it's returned (see below)
// Exposed public methods return { hello: hello, goodbye: goodbye } }));
Export statement
export x;
x = named export x = default export x = alias export
Import statement
import x from y;
x = named import x = default import x = alias import x = namespace import
y = import source
Import statement
• imports are live read-only views on exported values• we can’t change the export object, however you can
change property name value.
webpack
• bundle all the modules(concatenation) • convert ES6 code to ES5(using babel)
Rollup.js
bundle all the modules( a clean bundle)
Resources
http://rollupjs.org
medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc
http://2ality.com/2014/09/es6-modules-final.html
https://code.lengstorf.com/learn-rollup-js/
https://egghead.io/lessons/javascript-intro-to-webpack
http://exploringjs.com/es6/ch_modules.html
https://webpack.js.org/guides/installation/
