在 Javascript中什么叫 CJS, AMD, UMD,和 ESM？

从现在开始一百天，我会定期记录一些前端范围更加底层和前沿的内容。希望能够帮助自己和前端

ESM：

ES Modules的缩写 主要用于前端

• 大多现代浏览器都支持
• 异步加载和简单语法
• 因为是静态module结构，支持打包工具去除无用代码
• 当你导入lib，实际上是一个引用

代码示例：

import {foo, bar} from './myLib';

...

export default function() {
  // your Function
};
export const function1() {...};
export const function2() {...};

CJS:

CommonJS的缩写 主要用于服务器端

• node默认使用
• 同步引用代码
• 当你导入lib，实际上是导入一个lib的副本使用

代码示例：

//importing 
const doSomething = require('./doSomething.js'); 

//exporting
module.exports = function doSomething(n) {
  // do something
}

UMD

Universal Module Definition的缩写 主要用于前后端备胎 一般可以把cjs转为UMD，用于浏览器运行时使用。

代码示例：

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define(["jquery", "underscore"], factory);
    } else if (typeof exports === "object") {
        module.exports = factory(require("jquery"), require("underscore"));
    } else {
        root.Requester = factory(root.$, root._);
    }
}(this, function ($, _) {
    // this is where I defined my module implementation

    var Requester = { // ... };

    return Requester;
}));

AMD

Asynchronous Module Definition的缩写，几乎没人用了感觉。

代码示例：

define(['dep1', 'dep2'], function (dep1, dep2) {
    //Define the module value by returning a value.
    return function () {};
});

参考文章： dev.to/iggredible/…