前端 - 是否JS模块化规范我们在工作中使用CommonJS 和 ES6即可？

Question

流行的JS模块化规范有5种，
CommonJS、AMD、CMD、UMD以及ES6

请问是否是比较常用的是：CommonJS 和 ES6，

其他的都用的很少？ 我们在工作中使用CommonJS 和 ES6即可？

Answer 1

现代JS（包括TS）开发直接写ESM这一规范就好了，不需要手写其他规范的模块了。
如果你担心旧环境的兼容，可以利用构建工具（比如webpack、rollup），把ESM转成其他的规范。
比如一段ESM代码。

export function greeting(name: string) {  return `hello ${name}`}

可以打包成CJS

"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.greeting = void 0;function greeting(name) {    return `hello ${name}`;}exports.greeting = greeting;

AMD

define(["require", "exports"], function (require, exports) {    "use strict";    Object.defineProperty(exports, "__esModule", { value: true });    exports.greeting = void 0;    function greeting(name) {        return `hello ${name}`;    }    exports.greeting = greeting;});

UMD

(function (factory) {    if (typeof module === "object" && typeof module.exports === "object") {        var v = factory(require, exports);        if (v !== undefined) module.exports = v;    }    else if (typeof define === "function" && define.amd) {        define(["require", "exports"], factory);    }})(function (require, exports) {    "use strict";    Object.defineProperty(exports, "__esModule", { value: true });    exports.greeting = void 0;    function greeting(name) {        return `hello ${name}`;    }    exports.greeting = greeting;});

SystemJS

System.register([], function (exports_1, context_1) {    "use strict";    var __moduleName = context_1 && context_1.id;    function greeting(name) {        return `hello ${name}`;    }    exports_1("greeting", greeting);    return {        setters: [],        execute: function () {        }    };});

以上的CJS、AMD、UMD模块，都是打包工具自动生成的，你只要写ESM模块就好了，剩下的就交给工具。