preface

This article does not delve into the principles, but rather focuses on the surface presentation of differences between each module specification. In-depth principle and implementation details, I hope to have the opportunity to further study.

CommonJS

  1. userequireandexportsKeywords interact with the module system
  2. CommonJS does not support asynchronous loading
  3. A file is a module

Nodejs’s module specification is influenced by CommonJS, but Nodejs supports exporting objects using module.exports, whereas CommonJS only uses exports. CommonJS modules cannot be used until compiled. The following is an example.

// modules/physics.js
module.exports = {
  lorentzTransformation () {
  },
  maxwellSEquations () {
  }
}
Copy the code
// index.js
const physics = require('./modules/physics')

physics.lorentzTransformation()
physics.maxwellSEquations()
Copy the code

The module exports and exports

Module is an object with an exports attribute. Exports is a normal JS variable that is a reference to module.exports. If you set exports.name = ‘exports.name’, you set module.exports.name = ‘exports.name’. Exports and module.exports are no longer the same object, however, if you set a new object to exports.

// Simplified understanding
var module = { exports: {}}var exports = module.exports
Copy the code

AMD

AMD was born because CommonJS does not support asynchronous loading and is not suitable for browser environments. RequireJS implements the AMD API. The following is an example.

Load RequireJS in index.html with the tag, specifying the main file via the data-main attribute.


      
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>AMD</title>
  <! -- require.js -->
  <script data-main='./index.js' src="./require.js"></script>
</head>
<body>
</body>
</html>
Copy the code

The define keyword is used to define modules. Modules are divided into independent modules (modules that do not depend on other modules) and independent modules (modules that depend on other modules).

// Independent module
// libs/geometry.js
define(function() {
  'use strict';
  return {
    pythagoreanTheorem(a, b) {
      return a * a + b * b
    }
  }
})
Copy the code
// This module refers to the Geometry module
// libs/math.js
define(['./geometry.js'].function(geometry) {
  'use strict';
  return {
    geometry: {
      pythagoreanTheorem: geometry.pythagoreanTheorem
    }
  }
})
Copy the code

The require keyword is used to reference modules

// index.js
// Load the math module
require(['./libs/math'].function (math) {
  var c = math.geometry.pythagoreanTheorem(1.2)
  alert(c)
})
Copy the code

ES6

ES6 implements module mechanisms at the language level. Unlike CommonJS and AMD specifications, ES6 modules are static and cannot be used anywhere in a file. This behavior allows the compiler to build a dependency tree at compile time, but is not fully implemented in the browser in the ES6 module, requiring the use of Babel, Webpack.

// src/modules/physics.js
export function maxwellSEquations () {
  alert('maxwellSEquations')}Copy the code
// src/main.js
import { maxwellSEquations } from './modules/physics'

maxwellSEquations()
Copy the code

UMD

The UMD module is a generic pattern for compatibility with AMD and CommonJS specifications. The UMD specification is compatible with both AMD and CommonJS and supports the traditional pattern of global variables.

UMD modules usually have the following code at the top to identify the module loader environment.

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Global variables
    root.returnExports = factory(root.jQuery);
  }
}(this.function ($) {
  // ...
}));
Copy the code

reference

  • JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015
  • CommonJS vs AMD vs RequireJS vs ES6 Modules
  • What is AMD, CommonJS, and UMD?