Modules

Why modules

• Pollution of global namespace - hand to handle scope.
• Code Reusability - copy ang paste?
• Dependency Resolution - hard to handle nested dependencies.

Modules’ History

• 2009 - CommonJS was born when JavaScript being brought to server side.
• 2011 - AMD(Asynchronous Module Definition). CommonJs is synchronous, and there some problems when using it.
• 2010 - RequireJS. It is a JavaScript module loader based on AMD.
• 2011 - Browserify. AMD syntax is too verbose, list of dependencies in the array must match the list of arguments in the function and loading many small files can degrade the performance under HTTP 1.1. So module bundler Browserify is coming.
• 2011 - UMD(Universal Module Definition) - used to handle different module types(i.e., global module object, CommonJS and AMD) through if/esle.
• 2015 - ES6 modules defined in language spec, now modules are part of JavaScript.
• now - ? using latest or stable, it is up to you.

Bundlers

Why bundle modules

• Fewer files for more easily distributing.
• Compressing file’s size.
• Eliminating unused codes.
• Obfuscating codes.
• Processing codes before releasing.

How bundlers work

A JavaScript bundler start from entry file, then recursively imports until whole library in a single file.

Bundling tools List

Browserify

Browserify - browser-side require() the node.js way, require('modules') in the browser, and a node-style require() to organize your browser code and load modules installed by npm.

webpack 1

webpack 1 - webpack v1 is deprecated.

webpack 2

webpack 2 - Reading its new feature from webpack 2 and beyond & official introduction

• 🙅 ES6 Support 🙅‍
• 🌳 Tree shaking 🌳 Depending on the static structure of ES6 modules (imports and exports can’t be changed at runtime) to detect which exports are unused.
• And more milestones are ahead!

Rollup

Rollup - A next-generation ES6 module bundler, cliking link ahead the line to see the demos.

• Tree-shaking - Including the code you actually need, eliminating unused library code with tree-shaking. The resulting bundle size <= other tools’.
• Use via JavaScript API or a Command Line Interface.
• Plugin
• Start from entry file, then recursively imports until whole library in a single file.

Future’s

• HTTP/2
• Native JavaScript modules

References

• Tree-shaking with webpack 2 and Babel 6 - Intros to tree-sharking.
• Brief history of JavaScript Modules
• The future of bundling JavaScript modules
• The Evolution of JavaScript Modularity

Robin on Fisrt day of March, 2017 Wednesday