Javascript Module Dependency Resolving Technics

Table of Contents

• 1. Javascript的package dependency
  • 1.1. AMD
  • 1.2. CommonJS
  • 1.3. ES6

1. Javascript的package dependency

有三种specification

• AMD: asynchornous module defination
• CommonJS
• ES6 Harmony

相应的implementation:

• AMD: requireJS
• CommonJS: broswerify, webpack
• ES6: Traceur Compiler, Babel or Rollup

相关的语法：

1.1. AMD

Defining the module in somethingAwesome.js

define(function {
  console.log('Awesome');
});

Consuming the module, note that you do not necessary need to follow the same name of the module.

define(['somethingAwesome'], function (thatAwesomeSomething) {
  thatAwesomeSomething();
});

1.2. CommonJS

Defining the module in somethingAwesome.js

module.exports = function(){
  console.log('Awesome');
}

When consuming it somewhere else.

// Import our awesome module, you can call it anything you want
var thatAwesomeSomething = require('somethingAwesome');
// Use it
thatAwesomeSomething();

1.3. ES6

//ES6
import Class1 from 'file1';
import Class2 from 'file2';

let obj = newClass1(),
    obj2 = new Class2();

export default obj.foo(obj2);

Moving Past RequireJS Making sense of the difference between AMD, CommonJS, RequireJS and Browserify