JS & Node 模块化解释：AMD、UMD、CommonJS、 ESM

原创

已于 2024-07-14 14:17:53 修改 · 4k 阅读

标签

#javascript #前端

于 2023-07-08 22:22:59 首次发布

本文介绍了JavaScript的模块化解决方案，包括AMD(异步模块定义)通过RequireJS实现按需加载，解决命名冲突；CommonJS是Node.js的模块化标准，适合后端；UMD是两者的结合体，兼容浏览器和Node.js；最后，ESM是浏览器内置的模块化机制，现代浏览器和Node.js都支持。文章通过实例展示了各种模块化的使用方法。

一、前言

传统方式下，JS 若想引入其它 JS 文件时，通常使用 <script> 语法来完成，然而引入的 JS 往往易于造成命名污染，为了解决这问题，模块化 开发的概念逐渐浮现。

本文将以完整的 Demo 为各大模块的概念和写法进行阐述与演示，希望对你有帮助。

二、AMD

2.1 介绍

AMD 就是为了解决命名污染而研发的，同时还支持按需加载，是第一个引入 模块化 开发的规范插件，要想使用 AMD 语法得借助一款插件 RequireJS 。

注意，AMD 只适用于浏览器，虽然也支持 Node，但不如 Node 自家的 CJS，后面会讲。

2.2 使用

目录结构
引入 requirejs.js 插件

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script data-main="app.js" src="https://requirejs.org/docs/release/2.3.6/r.js"></script>
</head>
<body>
  <div id="app">
    Hello,world
  </div>
</body>
</html>

参数解释：data-main 代表 JS 入口文件，当 src 加载完插件后，会立刻执行 app.js 。

在 app.js 入口文件内进行一些 AMD 配置

// app.js
requirejs.config({
   
   
  baseUrl: 'modules/', // 引入模块的基路径。
});

使用 define 定义模块

// modules/tools.js
define('tools', function() {
   
   
  const getDeviceType = function() {
   
   
    return 'Android'
  }
  return {
   
   
    getDeviceType: getDeviceType,
  }
})

使用 require 加载模块

// app.js
requirejs.config({
   
   
  baseUrl: 'modules/',
});
// 根据上述配置的 baseUrl + 'tools' 去加载这个模块。 
require(['tools'], function(tools) {
   
   
  console.log('tools', tools)
})

效果：
在这里插入图片描述

小结：define && require = AMD，更多高级 API 和配置可参考官方。

三、CommonJS

3.1 介绍

CommonJS 也常被称为 CJS，与 AMD 一样属于模块化语法，不过它是用来兼容后端 Nodejs 语言，庆幸的是，CJS 在 Node.js 中已内置，开箱即用，无需引入插件。

3.2 使用

案例结构
使用 module.exports 定义模块

// modules/tools.js
const getDeviceType = () => {
   
   
  return 'Android'
}

module.exports = {
   
   
  getDeviceType,
}

使用 require 加载模块

const tools = require('./modules/tools')

最低0.47元/天解锁文章