前端模块的演变

UMD AMD CommonJS ESM

UMD

浏览器中直接运行

// 立即执行函数
(function(ctx, factory) {
  factory();
})(window, function(ctx) {
  // define module
});

// 立即执行函数
(function(ctx, factory) {
  factory();
})(window, function(ctx) {
  // define module
});

define(id?, dependencies?, factory);

接收三个参数
- id 字符串（可选）
- dependencies 数组（可选） == 为 factory 工厂函数提供参数(已经定义好的模块) 默认为 ['require', 'exports', 'module']
- factory 执行函数

// 1
define('library', function(require) {});

// 2
define(function(require, exports, module) {
  var a = require('a');
  exports.a = a;
});

// 1
define('library', function(require) {});

// 2
define(function(require, exports, module) {
  var a = require('a');
  exports.a = a;
});

define(function(require) {
  var a = require('a');
});

define(function(require) {
  var a = require('a');
});

define(function(require) {
  require(['a', 'b'], function(a, b) {});
});

define(function(require) {
  require(['a', 'b'], function(a, b) {});
});

define(function(require) {
  var templatePath = require.toUrl('./templates/xx.html');
});

define(function(require) {
  var templatePath = require.toUrl('./templates/xx.html');
});

NodeJS

// 引入
var a = require('./a');
var b = require('./b');

/// 多个导出
module.a = a;
module.b = b;

// 默认导出
module.exports = a;

// 引入
var a = require('./a');
var b = require('./b');

/// 多个导出
module.a = a;
module.b = b;

// 默认导出
module.exports = a;

// 引入
import a from './a';
import b from './b';

// 多个导出
export a;
export b;

//  默认导出
export default a;

// 引入
import a from './a';
import b from './b';

// 多个导出
export a;
export b;

//  默认导出
export default a;

...

引入一个文件夹匹配的所有文件，返回三个属性 resolve keys id

const r = requrie.context('./a', false, /\.js$/);
// r.resolve() 一个函数返回解析的 module id
// r.keys 返回一个数组 模块名
// r.id 返回一个标识 id

const r = requrie.context('./a', false, /\.js$/);
// r.resolve() 一个函数返回解析的 module id
// r.keys 返回一个数组 模块名
// r.id 返回一个标识 id

requrie.context(dir, subDir, regExp, mode = 'sync');