CJS (CommonJS)

适用于node和web浏览器之外的其他生态系统, 它在服务端被广泛使用.

require()

module.exports = {}

require 是一个函数, 可用于将符号从另一个模块导入到当前范围. module.exports是当前模块在另一个模块需要时返回的对象.

由于CJS是同步的, 浏览器本身无法识别, 因此CJS模块不能在浏览器端使用, 除非它与转译器(如babel)一起使用.

举例: 在前端项目中最常见的webpack配置中

const path = require('path');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    ...
}

AMD (Asynchronous Module Definition)

AMD脱胎于CJS, AMD支持异步模块加载. 而AMD和CJS的主要区别在于它对异步模块加载的支持.

与RequireJS等模块加载器一起使用, 在浏览器端工作.

AMD提供了一些CJS的操作性, 它允许在代码中使用类似module.exports和require()接口, 尽管它的define()接口更基础, 更受欢迎.

define(['dep1', 'dep2'], function(dep1, dep2) {
   ...
})

or

define(function(require) {
    const dep1 = require('dep1'),
        dep2 = require('dep2');
    ...
})

UMD (Universal Module Definition)

与AMD, CJS 合而为一.Universal (通用的, 适用于前端和后端)

UMD在任何地方工作-(在服务器端和浏览器端). 它提供与当前最流行的脚本加载器的兼容性, 例如requireJS. 在许多情况下, 它使用AMD作为基础, 并添加了特殊外壳以处理CJS兼容性.

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.example = {}));
    }(this, (function (exports) { 
    ...
})));

ESM (ES2015 Module)

将包保存为es模块文件.

自ES2015以来, ESM成为JS中使用的官方标准. 它在JS客户端开发中被广泛使用,并且被作为TS所采用.

同时node在12高版本中开始支持ESM, ESM可同时用于客户端和服务端.

import()静态导入可用于将模块引入当前范围, 动态dynamicimport()从ES2020开始可用.

export 可用于将模块显示暴露出去.

import React from 'react';

const Book = () => {
    
    return (
        <div>book</div>
    )
}

export default Book;