Robin。

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

Timeline Bundling Tools First Release Last Release
2011 - 2016 browserify Aug 30, 2011 May 6, 2016
2015 - 2017 with no stable release Rollup May 21, 2015 Jan 15, 2017
2013 - 2016 webpack 1 Dec 20, 2013 Aug 18, 2016
2015 - now webpack 2 Nov 2, 2015  

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


Robin on Fisrt day of March, 2017 Wednesday

- - - - - -
written by 陈烨彬 Robin Chen , and published under (CC) BY-NC-SA.