CommonJS, asset bundling and ES6 modules.

Author: CoreyScript

Modules.md

@@ -47,3 +47,69 @@ var something = (function(globalSecret) {
 ```
 
 So here, `globalSecret` still equals `'1234'` but `something.globalSecret` equals `'0'`.
+
+# CommonJS
+
+CommonJS and AMD (asynchronous module definition) solved the problem of designing a module in a way that doesn't have interference of global
+scope where variables can be overwritten. 
+
+CommonJS used the require syntax which allowed you to import certain files or modules.
+
+```javascript
+let module1 = require('module1'); // import a module
+let fight = require('module1').fight; // import a specific function
+```
+CommonJS was created mainly for the server, with Node.js in mind and it contributed to Node's rise in popularity over time. NPM (Node Package Manager) used CommonJS to make it easy for developers to share their modules with eachother.
+
+In CommonJS, modules are loaded synchronously, and considering JavaScript only has one call stack, each module needs to load one after the other before your script can even run. This is obviously not ideal for the dynamic environment of a web browser, which was why it was mainly used on the server side only.
+
+If only CommonJS could work on the client side without compromising performance..
+
+## Asset bundling to the rescue
+
+Asset bundling services like Browserify and Webpack allow you to require modules in the browser by bundling up all of your dependencies into one JavaScript file. This traverses the dependeny tree of your code so only one reference needs to be made, preventing you from having to worry about handling the loading sequence of multiple dependencies. 
+
+# ES6 Modules
+
+```javascript
+import module1 from 'module1'
+```
+
+JavaScript needed a way to natively support modules in all environments not just the browser, e.g. server, mobile, desktop, iOT devices.
+
+### Named export
+
+```javascript
+export const jump = () => {}
+export const attack = () => {}
+
+import { jump, attack } from 'module2'
+```
+
+### Default export
+
+```javascript
+export default const kick = () => {}
+
+import kick from 'module2'
+```
+
+# Conclusion
+
+Initially, JavaScript started with simple script tags, but as our programs and web pages got more complex over time, we started to see problems.
+
+We needed a way to have modules, so we used Immediately Invoked Function Expressions to create the module pattern. But over time, this system still needed to be improved.
+
+So libraries like CommonJS and AMD came into play to make our code more reusable and modular, and also allowed us to share our code with other programmers.
+
+Then finally we got native ES6 modules, where JavaScript as a language now has modules built in.
+
+This gives us the ability to separate concerns and divide up our programs into small chunks that work independently.
+
+We avoid global namespace pollution by only exporting specific code, not necessarily the whole file.
+
+We can now compose different modules together to add different functionality to our programs.
+
+We can use third party code from places like NPM.
+
+We now have a way to organize our codebase better, allowing us to build large applications with JavaScript.