JavaScript模块构建的三种方式

第一章 CommonJS构建

CommonJS是一种模块化规范，最初是为Node.js设计的，但现在也可以在浏览器中使用。它的核心思想是将代码分割成模块，每个模块都有自己的作用域，通过module.exports来导出模块的内容，通过require来导入其他模块。

CommonJS的示例代码

//模块导出
exports.myFunction = function() {
  //...
};

//模块导入
const myLibrary = require("my-library");
myLibrary.myFunction();

CommonJS的优势在于它的简单性和Node.js的广泛支持。它适用于服务器端的构建，以及一些前端构建工具，如Webpack和Browserify。然而，它的同步加载方式可能在浏览器中导致性能问题，特别是对于大型应用。

第二章 ES模块构建

ES模块是JavaScript的官方模块规范，它在现代浏览器中得到了原生支持，也可以在Node.js中使用。ES模块使用import和export语法，它支持异步加载和动态导入。

ES模块的示例代码

//模块导出
export function myFunction() {
  //...
};

//模块导入
import {myFunction} from "my-library";
myFunction();

ES模块的优势在于它的性能和标准化。它是浏览器原生支持的模块系统，不需要额外的构建工具。但在一些旧版本的浏览器和Node.js中，可能需要额外的工具和配置来支持ES模块。

第三章 AMD模块构建

AMD（Asynchronous Module Definition）是一种用于浏览器的模块定义规范，它允许异步加载模块，适用于需要动态加载代码的场景。

AMD的示例代码

//模块定义
define(['dependency'], function(dependency) {
  return {
    myFunction: function() {
      //...
    }
  }
});

//模块导入
require(['my-library'], function(myLibrary) {
  myLibrary.myFunction();
});

AMD的优势在于它的异步加载能力，适用于浏览器环境，特别是在Web应用程序中需要按需加载模块时。然而，AMD的语法相对复杂，对于大型应用程序的管理可能会变得困难。

参考资料：
1、https://www.jb51.net/javascript/295907jnb.htm