6种 JavaScript 模块输出选项-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，为了提高代码的可维护性和重用性，我们通常使用模块化的方式组织代码。JavaScript模块可以通过不同的输出选项来实现模块的导出和引入。本文将介绍常见的六种 JavaScript 模块输出选项，包括 CommonJS、ES6、AMD、UMD、SystemJS 和 Closure Compiler。

1. CommonJS

CommonJS 是 Node.js 最早采用的模块系统，它定义了一个 module 对象和一个 exports 对象，通过给 exports 对象添加属性或方法来导出模块，通过 require 函数来引入模块。

导出示例

// module.js
function add(a, b) {
  return a + b;
}

module.exports = add;

引入示例

// index.js
const add = require('./module');

console.log(add(1, 2)); // 输出 3

2. ES6 Module

ES6 模块是 ECMAScript 2015 标准中新增的模块化方式，它使用 export 关键字导出模块，使用 import 关键字引入模块。

导出示例

// module.js
export function add(a, b) {
  return a + b;
}

引入示例

// index.js
import { add } from './module';

console.log(add(1, 2)); // 输出 3

3. AMD

AMD（Asynchronous Module Definition）是一种在浏览器端异步加载模块的规范，它使用 define 函数定义模块，使用 require 函数引入模块。

导出示例

-- -------------------- ---- -------
-- ---------
--------------- -- -
  -------- ------ -- -
    ------ - - --
  -

  ------ -
    ---- ---
  --
---

引入示例

// index.js
require(['./module'], function (module) {
  console.log(module.add(1, 2)); // 输出 3
});

4. UMD

UMD（Universal Module Definition）是一种兼容 CommonJS 和 AMD 的模块化方式，它可以在不同的环境中使用。

导出示例

-- -------------------- ---- -------
-- ---------
--------- ------ -------- -
  -- ------- ------ --- ---------- -- ----------- -
    ---------- ---------
  - ---- -- ------- ------- --- --------- -
    -------------- - ----------
  - ---- -
    -------- - ----------
  -
------- -------- -- -
  -------- ------ -- -
    ------ - - --
  -

  ------ -
    ---- ---
  --
----

引入示例

// index.js
var add = require('./module').add || add;

console.log(add(1, 2)); // 输出 3

5. SystemJS

SystemJS 是一个支持多种模块格式的动态模块加载器，它可以在浏览器端和 Node.js 中使用。

导出示例

-- -------------------- ---- -------
-- ---------
------------------- -------- --------- -
  -------------- -------- --- -- -
    ------ - - --
  ---

  ------ -
    -------- ---
    -------- -------- -- --
  --
---

引入示例

// index.js
System.import('./module').then(function (module) {
  console.log(module.add(1, 2)); // 输出 3
}).catch(function (err) {
  console.log(err);
});

6. Closure Compiler

Closure Compiler 是 Google 开源的 JavaScript 编译器，它可以将 JavaScript 模块编译成一个单独的文件，提高代码的执行效率。

导出示例

// module.js
goog.module('myModule');

function add(a, b) {
  return a + b;
}

exports = { add };

引入示例

// index.js

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/11961) ，转载请注明来源
[https://www.javascriptcn.com/post/11961](https://www.javascriptcn.com/post/11961)