模块化规范

概念

• AMD (Asynchronous Module Definition): 在浏览器中使用，并用 define 函数定义模块

• CJS (CommonJS): 在 NodeJS 中使用，用 require 和 module.exports 引入和导出模块

• ESM (ES Modules): JavaScript 从 ES6(ES2015) 开始支持的原生模块机制，使用 import 和 export 引入和导出模块

• UMD（Universal Module Definition）：通用模块定义，为了兼容 AMD 模块，CJS 等模块定义规范，以及 ESM ，相当于上面几种模块的综合形式

源代码

import bar from 'Bar'

let foo = () => {
  console.log(bar);
};

AMD

是通过RequireJS （一个js文件，需要使用script 标签引入）是一个 module loader——模块加载器。给浏览器使用的，让浏览器支持模块化

AMD 模块输出

define(["Bar"], function (_Bar) {
  "use strict";

  _Bar = _interopRequireDefault(_Bar);
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
  var foo = function foo() {
    console.log(_Bar["default"]);
  };
});

CJS

是Nodejs也就是后端js原始的模块化js的方式

.cjs 文件、 package.json 中配置type为commonjs 、或者 require() 函数默认调用cjs模块加载器

ESM

浏览器ES6开始支持的导包方式，需要在 sctipt type=module 标签中来使用

nodejs需要使用 .mjs 文件，或者在 package.json 中配置 type 为 module 、或者启动node项目增加命令行参数 –input-type

UMD

简单来讲，以前是要将js 代码中的模块按照不同环境进行处理，输出成不同平台的文件，比如.cjs.js .amd.js 等，使用 UMD 规范，可以输出成一个.js 文件，这个.js 文件会做一些处理，来支持不同环境

Babel 的 UMD 输出

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["Bar"], factory);
  } else if (typeof exports !== "undefined") {
    factory(require("Bar"));
  } else {
    var mod = {
      exports: {}
    };
    factory(global.Bar);
    global.main = mod.exports;
  }
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_Bar) {
  "use strict";

  _Bar = _interopRequireDefault(_Bar);
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
  var foo = function foo() {
    console.log(_Bar["default"]);
  };
});