【NPM】工程化依赖包/库开发之基础知识2

补充知识点：模块规范 (及格式)
当下主流模块规范：CommonJS、AMD、UMD、CMD、ESM

模块规范

1. CommonJS

维度	内容
特点	采用同步加载模块，适合在`服务器端`使用（如`Node.js`）。使用`require`导入模块，使用`module.exports`导出模块。
场景	主要用于`Node.js`环境，适合后端开发。
优点	简单易懂，适合服务器端的模块化。
缺点	不支持异步加载，不适合浏览器环境。

示例：

// module.js - 定义模块
const hello = () => 'Hello, world!';
module.exports = hello;

// main.js - 加载模块
const hello = require('./module');
console.log(hello()); // 输出: Hello, world!

2. AMD

全称：Asynchronous Module Definition -> 异步模块定义

维度	内容
特点	`异步加载`模块，适合`浏览器环境`。使用`define`定义模块，使用`require`加载模块。
场景	适用于需要`异步加载`的`浏览器项目`。
优点	支持异步加载，提高性能。
缺点	语法较复杂，配置较多。

示例：

// module.js - 定义模块
define([], function() {
  return function() {
    console.log('Hello from AMD!');
  };
});

// main.js - 加载模块
require(['module'], function(myModule) {
  myModule();
});

3. UMD

全称：Universal Module Definition -> 通用模块定义

维度	内容
特点	结合了`CommonJS`和`AMD`，支持多种环境（`浏览器`、`Node.js`）。使用`(function (root, factory) {...})(this, factory)`模式。
场景	用于`库`和`框架`，可以在多种环境中使用。
优点	灵活，兼容性强。
缺点	代码较冗长，增加了复杂性。

示例：

// myLibrary.js
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory();
  } else {
    root.myLibrary = factory();
  }
}(this, function () {
  return function() {
    console.log('Hello from UMD!');
  };
}));

// 使用
const myLibrary = require('./myLibrary');
myLibrary();

4. CMD

全称：Common Module Definition -> 公共模块定义

维度	内容
特点	异步加载，灵感来自`AMD`，但更注重依赖的执行顺序。使用`define`定义模块，采用`惰性加载`。
场景	主要用于`Sea.js`框架的项目。
优点	支持惰性加载，依赖处理更灵活。
缺点	生态相对较小，社区支持有限。

示例：

// module.js
define(function(require, exports, module) {
  module.exports = function() {
    console.log('Hello from CMD!');
  };
});

// main.js
define(function(require) {
  var myModule = require('./module');
  myModule();
});

5. ESM (ES Modules)

ES6 module 和 ES Modules 实际上是指同一种模块化机制

ES6 Module: 是对 ECMAScript 2015（也称为 ES6）中引入的模块系统的简称。它包含了import和export语法，用于实现模块化。
ES Modules: 是对 ES6 Module 的正式称呼，通常用于指代现代 JavaScript 中的模块系统。它代表的是一组与模块相关的规范和功能。

维度	内容
特点	原生支持模块化，使用`import`和`export`语法。支持`异步加载`，浏览器`原生支持`。
场景	现代`JavaScript`项目，`浏览器`和`Node.js`都支持。
优点	语法简洁，支持静态分析，性能优越。
缺点	需要较新版本的`浏览器`或`Node.js`，`旧环境不支持`。

示例：

// module.js
export function greet() {
  console.log('Hello from ES Modules!');
}

// main.js
import { greet } from './module.js';
greet();

【NPM】工程化依赖包/库开发 之 基础知识2

模块规范

1. CommonJS

2. AMD

3. UMD

4. CMD

5. ESM (ES Modules)

悦读

【NPM】工程化依赖包/库开发之基础知识2