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

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量1.3k 收藏 6
点赞数 2
分类专栏： JavaScript 前端工具 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cookcyq__/article/details/131497598
版权

一、前言

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

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

二、AMD

2.1 介绍

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

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

2.2 使用

  1. 目录结构
    在这里插入图片描述

  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 。

  1. 在 app.js 入口文件内进行一些 AMD 配置
// app.js
requirejs.config({
  baseUrl: 'modules/', // 引入模块的基路径。
});
  1. 使用 define 定义模块
// modules/tools.js
define('tools', function() {
  const getDeviceType = function() {
    return 'Android'
  }
  return {
    getDeviceType: getDeviceType,
  }
})
  1. 使用 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，与 ADMI 一样属于模块化语法，不过它是用来兼容后端 Nodejs 语言，庆幸的是，CJS 在 Node.js 中已内置，开箱即用，无需引入插件。

3.2 使用

  1. 案例结构
    在这里插入图片描述

  2. 使用 exports.module 定义模块

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

exports.module = {
  getDeviceType,
}
  1. 使用 require 加载模块
const tools = require('./modules/tools')
const app = () => {
  console.log('tools', tools)
}
app();
  1. 执行 node
    在这里插入图片描述

小结：exports.module && require = CJS

提示：文件后缀也可以是 .cjs，Node 会自动识别。

四、UMD

4.1 介绍

UMD 是 AMD + CommonJS 的结合体，同时还兼容了 script 标签引入，对组件库或框架库来说，解决了以前一套代码无法多端使用的难题。UMD 模块可借助 Rollup 工具来完成。

4.2 使用

  1. 安装 rollup
npm i rollup -g

  1. 案例结构
    在这里插入图片描述
    modules/tools.js 模块代码如下：

    const getDeviceType = () => {
  return 'Android'
}
export { getDeviceType }

    注意：代码采用的是 ESM 写法，后面会讲到。

  2. 通过 rollup 将文件打包成 UMD 产物

    rollup ./modules/tools.js  --file ./modules/tools_umd.js  --format umd --name=tools

    解释：

    • --file 表示自定义输出产物的目录和文件名。
    • --format 表示文件的转换格式，这里我们转成 umd 即可。打包后的 tools_umd.js 将放在 modules/ 目录下，产物内容如下：
    • --name 表示兼容 script 标签，将数据挂载到指定的全局对象变量中，后续通过 window[name] 来获取模块。

构建完的产物如下：

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.tools = {}));
})(this, (function (exports) { 'use strict';

  const getDeviceType = () => {
    return 'Android'
  };
  exports.getDeviceType = getDeviceType;
}));
  1. 在浏览器引入 UMD 产物
  • 首先在 index.html 中引入 AMD 插件 requirejs，并执行 app-web.js ，如下：
<!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-web.js" src="https://requirejs.org/docs/release/2.3.6/r.js"></script>
</head>

<body>
  <div id="app">
    Hello,world
  </div>
</body>
</html>
  • 在 app-web.js 中引入加载刚刚打包好的 UMD 模块：
requirejs.config({
  baseUrl: 'modules/',
});
require(['tools_umd'], function (tools) {
  console.log('tools', tools)
})

效果：

在这里插入图片描述

  1. 在浏览器通过 script 标签引入 UMD 产物
<!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-web.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->
  <script src="./modules/tools_umd.js"></script>
</head>

<body>
  <div id="app">
    Hello,world
  </div>
</body>
</html>

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

  1. 在 Node 引入 UMD 产物
const tools = require('./modules/tools_umd.js')
const app = () => {
  console.log('Tools are: ', tools)
}
app()

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

  1. 在浏览器中通过 ESM 引入 UMD 产物：

由于 UMD 仅兼容 AMD/CJS ，可使用 rollup 将 format 设置 esm 版本即可：

rollup ./modules/tools.js --file ./modules/tools_esm.js --format esm

本质上和原先的 tools.js 代码没区别：

在这里插入图片描述

<!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-web.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->
  <!-- <script src="./modules/tools_umd.js"></script> -->
  <script type="module" src="app.js"></script>
</head>

<body>
  <div id="app">
    Hello,world
  </div>
</body>

</html>

// app.js
import { getDeviceType  } from './modules/tools_esm.js';
const app = () => {
  console.log('Tool method:', getDeviceType)
}
app()

请添加图片描述

小结：

  1. UMD = AMD + CJS + Script 标签
  2. UMD 需要借助打包工具如 Webpack/Rollup
  3. 除了 Webpack/Rollup 工具，还可以结合其它工具如 Babel，可以将最新的 ES 语法转成低版本的语法，当然这是题外话，对 Babel 话题感兴趣的可参考：JS & 介绍 Babel 的使用及 presets & plugins 的概念

五、ESM

5.1 介绍

由于浏览器始终得借助于 ADM 或 UMD 来进行模块化开发，官方实在看不下去，决定让浏览器内置一套模块化机制，俗称 ESM，目的就是减少 AMD 或 UMD 的依赖实现统一规范，它与 CJS 一样，现代浏览器已经内置好了。

由于 ESM 技术较新，一些旧浏览器无法兼容，因此现在大多项目要借助 Webpack/Rollup 等构建工具将 ESM 打包成兼容的语法；也就说，我们可以在项目中写 ESM 代码，但在运行期间，代码会以兼容语法的方式来执行。

5.2 使用

其实在前面的 UMD 章节第 7 点我们已经使用过 ESM 语法了，除了 export 导出方式，还有其它导出的方式 export default ，它可以导出完整的对象，接下来将基于此语法作为演示。

提示：浏览器使用 ESM 的前提条件是给 script 标签加上 type="module"
另外，这里我们不再借助 Rollup 构建转换工具，现代浏览器本身就支持 ESM。

  1. 案例结构：
    请添加图片描述
  2. 原来的 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 type="module" src="app.js"></script>
</head>
<body>
  <div id="app">
    Hello,world
  </div>
</body>
</html>
  1. 改造 app.js
// app.js
import tools from './modules/tools.js';
const app = () => {
  console.log('Tools are:', tools)
}
app()
  1. 改造 modules/tools.js，使用 export default 方式导出
// modules/tools.js
const getDeviceType = () => {
  return 'Android'
}
const getDeviceVersion = () => {
  return '1.0.0'
}
const tools = {
  getDeviceType,
  getDeviceVersion
}
export default tools

效果：
在这里插入图片描述
5. export 与 export default 支持混合使用

一个 JS 文件中，export 可以有无限个，但 export default 只能有一个。

// modules/tools.js
...
export { getDeviceType, getDeviceVersion }
export default tools

// app.js
import tools from './modules/tools.js';
import { getDeviceType } from './modules/tools.js';
const app = () => {
  console.log('Tools are:', tools)
  console.log('Method is:', getDeviceType)
}
app()

请添加图片描述

六、Nodejs 如何使用 ESM？

6.1 介绍

ESM 语法已经成为现代模块化标准规范，Nodejs 从 12.0.0 版本就开始支持 ESM ，前提条件是，文件名后缀必须为 .mjs ，若想省略 .mjs ，可在 package.json 设置 type: "module" 即可；

提示：若 A.js 想引入 B.mjs ，也要在 package.json 设置 "type": "module" ，否则 node 运行时也会报错，如果是 A.mjs 引入 B.mjs 则不用配置。

6.2 使用

  1. 案例结构
    请添加图片描述

  2. 改造 tools.mjs ，代码如同上述的 ESM

const getDeviceType = () => {
  return 'Android'
}

const getDeviceVersion = () => {
  return '1.0.0'
}

const tools = {
  getDeviceType,
  getDeviceVersion
}

export { getDeviceType, getDeviceVersion }

export default tools
  1. 改造 app.js
import tools from './modules/tools.mjs'
const app = () => {
  console.log('Tools are:', tools)
}
app()
  1. 在 node-esm 跟目录下执行 npm init -y，将会生成 package.json，里面我们只需新增 "type": "module" 即可
{
  "name": "node-esm",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module"
}

提示：我们可以把前面的 tools.mjs 换成 tools.js ，因为我们已经设定了 "type: "module" ，但为了方便演示，这里就不变更了。

  1. 运行
node app.js

效果：
请添加图片描述

注意：一个 .js 文件不可能同时存在 ESM 或者 CJS 两种语法，也就是你的项目只能选择其中一种模块化语法来开发，否则执行时会抛出错误。像前端常见的 Vite 脚手架，我们之所以能够写 ESM 语法而不用在当前项目设定 module 的原因是， vite 内部的 package.json 早已设定好 "type": "module"，通过 vite 来执行项目时会自动解析我们写的ESM 代码。

----------------------------------------------------------------结尾----------------------------------------------------------------

完整 demo 已放到 github 。

参考文献：
https://requirejs.org/docs/api.html#usage
https://adostes.medium.com/authoring-a-javascript-library-that-works-everywhere-using-rollup-f1b4b527b2a9
https://blog.logrocket.com/how-to-use-ecmascript-modules-with-node-js/

cookcyq
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
moduloze:将CommonJS（CJS）模块转换为UMD和ESM格式
03-12
模数 将CommonJS（CJS）模块转换为UMD和ESM格式。 概述 Moduloze支持以Node.js生态系统固有的CommonJS（CJS）格式创作JS模块，并将这些模块转换为通用模块定义（UMD）和ES模块（ESM）格式。 UMD在尚未在应用程序中使用ESM的浏览器中特别有用。 CJS可以在所有版本的Node上继续完全运行，但是在最新的Node版本中，模块的ESM格式也可以运行，尽管有一些独特的局限性。 UMD也可以在所有版本的Node中使用，尽管它基本上与CJS相同。 像Moduloze一样，最常见的用例是编写一个实用程序，与许多OSS库/框架一样，该实用程序可以在Node和浏览器中使用。 通过以CJS格式进行创作，并将Moduloze作为构建过程，可以在浏览器中无缝使用UMD / ESM格式，而无需进行额外的创作。 另外，Moduloze可以用作一次性的“升级”代码-m
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
10-22
下面小编就为大家分享一篇浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结。小编觉得写的非常不错，需要的朋友可以过来参考一下
组件库打UMD包
qq_37464878的博客
03-15 1136
项目使用的是antd4.x，在组件库未单独打umd包前还需要引入样式文件，在打包时还配置了插件将antd依赖的momentjs转为体积较小的dayjs。最后的umd包的体积是960KB左右，我们的目标是1.2MB左右，说明仍然可以借助提取第三方包作为外部依赖来压缩umd包的体积。在上面几个问题的解决中已经把一些体积较大的包放入外部依赖，但是打包成umd后进行体积分析，发现体积很大，最后的umd包的体积是1.49MB左右。打包时在common组件库打包入口类似于antd的es包引入了所有组件并重新导出。
cjstoesm：可以将CommonJS转换为ESM的工具
01-31
可以将CommonJS转换为ESM的工具 描述 这是一个将转换为可摇树的。 这不仅使您可以为浏览器捆绑CommonJS模块，而且还可以将它们捆绑在等现代工具中。 cjstoesm可以从使用，作为，并为。 存在诸如和现有技术，但是此Custom Transformer旨在生成与ES模块本地编写的等效代码一样可摇晃的代码。 此外，它的目标是尽可能地清洁，在模块周围没有像其他类似解决方案中看到的“包装纸” 。 例如，下面是cjstoesm重写CommonJS模块的方式： 输入值 exports . foo = function foo ( ) { } ; 输出量 export function foo ( ) { } 这是另一个例子： 输入值 module . exports = { foo ( ) { return 2 + 2 ; } , bar : 3 , baz : new RegExp ( "" ) } ; 输出量 export function foo ( ) { return 2 + 2 ; } export const bar = 3 ; expo
Javascript模块化方法CJS, AMD, UMD,ESM 简洁解释
細水、長流√的专栏
11-07 487
示例};});};});AMD 是异步(asynchronously)导入模块的(因此得名)一开始被提议的时候，AMD 是为前端而做的(而 CJS 是后端)AMD 的语法不如 CJS 直观。我认为 AMD 和 CJS 完全相反} else {// ... };}));在前端和后端都适用（“通用”因此得名）与 CJS 或 AMD 不同，UMD 更像是一种配置多个模块系统的模式。这里可以找到更多的模式。
详解AMD、CommonJS和UMD模块化规范
奋斗的小绿萝
07-26 7328
开发的时候，我们经常会把某些功能封装成可复用的模块。模块封装了功能，并且对外暴露一个API。随着Node.js的诞生和发展，JavaScript可以在服务端运行，同时客户端应用也越来越流行，JavaScript界产生了对优秀和健壮模块系统的需求。在JavaScript中定义模块的规范也随之产生。 这里，将详细介绍最常见的两个定义模块的方法AMD和CommonJS，以及它们的结合UMD. ...
JavaScript 模块(commonJS,AMD,UMD,ES6模块)
m0_61773971的博客
05-24 816
异步模块定义AMD的模块定义系统则以浏览器为目标执行环境,这需要考虑网络延迟问题.AMD的核心是使用函数包装模块定义参数一为模块名,参数二为依赖的模块(注意require,exports),参数三为模块内容.name='wta'})console.log('是commonjs模块规范，nodejs环境')console.log('是AMD模块规范，如require.js')console.log('是CMD模块规范，如sea.js')})} else {
javascrip中UMD规范
全栈科学家的博客
12-07 447
javascrip中UMD规范
Modularity（模块化-UMD通用模式）
SeriousLose
06-17 876
UMD通用模式（universal module definition） UMD 是 AMD 和 CommonJS 的综合产物。 如上所说，AMD 的用武之地是浏览器，非阻塞式加载。 CommonJS 主要用于服务端 Nodejs 中使用。 就想到了一个通用的模式 UMD（universal module definition） 。 ...
JS模块化总结(commonJs规范、AMD规范、CMD规范、ES6)
小陈的博客
03-28 795
define(function(){let name = 'module1'function getName () {return name}// 暴露模块return {getName}})})})})})最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
说说AMD、CMD、commonJS模块化规范的区别？
路人贾！
01-10 267
说说AMD、CMD、commonJS模块化规范的区别？
cjs2esm:将使用CommonJS的项目转换为ES模块
03-07
CJS 2 ESM 将使用CommonJS的项目转换为ES模块。 :memo: 介绍如果您想知道我为什么要构建此文件，请转到“部分。 您可以使用此工具将使用CommonJS的项目转换为ES Modules，并将其准备好用于Node v14 ，具有ESM支持的...
浅析AMD CMD CommonJS规范–javascript模块化加载学习心得总结
11-23
这是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结，作为记录也给同样对三种方式有疑问的童鞋们，有不对或者偏差之处，望各位大神指出，不胜感激。 本篇默认读者大概知道require，seajs的用法(AMD,CMD用法)，...
CommonJS、AMD、CMD、ES6模块化区别详细总结
weixin_45709829的博客
04-13 7080
一、CommonJS、AMD、CMD、ES6知识点简单概述 （1）CommonJS NodeJS是CommonJS规范服务器端的实现，webpack也是CommonJS的形式书写。同步加载，服务器端从磁盘中读取速度快，运行在服务器端没有问题。 （2）AMD AMD是Asynchronous Module Definition异步模块定义。 基于CommonJS规范的node.JS是服务端模块化的实现。实现浏览器端的模块化就是AMD，且能与服务器端兼容最好。同一个模块在服务器端和浏览器端都可以维护运行，简单方
打包umd_模块化之 snowpack，提高10倍打包速度。
weixin_34405769的博客
12-30 214
来源：秋风的笔记https://mp.weixin.qq.com/s/NYsYdADuPY6rVFwkp-O0tw引言前几天听一个朋友说到snowpack, 便去去看了下这个包是干什么的，看了下官网，发现这个东西还是蛮有意思的。号称无需打包工具(Webpack，Parcel)便能将代码结果实时展现在浏览器中。可以先看以下的图，是不是很诱人？snowpack 以 ES Modules ...
前端模块化（CommonJs,AMD和CMD）
abc20140818的博客
03-29 238
前端模块规范有三种： CommonJs, AMD 和 CMD。 CommonJs用在服务器端，AMD和CMD用在浏览器环境 AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。提前执行（异步加载：依赖先执行）+延迟执行 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。延迟执行（运行到需加载，根据顺序执行）延迟执行（运行到需加载，根据顺序执行） ...
全面理解JS模块的标准（AMD、CMD、COMMON.JS 、 UMD、ESM）
qq_30436011的博客
09-23 4229
require.js是AMD模块规范的一个具体实现核心是通过define方法对无序的代码进行有序的模块化定义，通过require方法实现代码的模块化加载});control.js/*** 登录状态检测*/};/*** 模块调用及配置*/{// 登录页});};// 注册页});};};{// 详情页});};};};});sea.js是CMD模块规范的一个具体实现在定义模块方面, CMD和AMD一样通过define函数来定义模块;
amd、umd、cmd、commonjs
weixin_44283589的博客
08-04 399
异步加载模块，适用于浏览器环境中需要动态加载模块的情况。使用 define 函数定义模块使用 require 函数异步加载依赖模块。支持在浏览器和Node.js环境中使用的通用模块定义格式可以通过全局变量或模块加载器进行加载// AMD 加载 define(['dep1', 'dep2'], factory);// Node.js 加载 module.exports = factory(require('dep1'), require('dep2'));} else {
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 149
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
vue3项目启动报错[plugin vite:dep-pre-bundle] Failed to resolve entry for package "ids". The package may have incorrect main/module/exports specified in its package.json
07-16
这个错误提示是由 Vite 构建工具引起的。它指出在你的项目依赖中，名为 "ids" 的包找不到入口文件。可能是该包的 package.json 文件中的 main、module 或 exports 字段配置不正确。 解决这个问题的方法是检查 "ids" 包的 package.json 文件，并确保它们正确指定了入口文件。你可以尝试手动修改 package.json 文件中的这些字段来解决问题。 如果这个包是你自己的包，你可以按照以下步骤进行修复： 1. 打开 "ids" 包的 package.json 文件。 2. 确保 "main" 字段指向正确的入口文件路径。通常情况下，入口文件是一个 JavaScript 文件，用于导出该包的功能。 3. 如果你的包是使用 ES 模块语法编写的，并且希望以 ES 模块的形式导入，确保 "module" 字段指向正确的 ES 模块文件路径。 4. 如果你的包支持导出不同的模块格式（CommonJS、UMD 等），可以使用 "exports" 字段来指定不同格式的入口文件路径。 完成上述步骤后，重新启动你的项目，看看是否还会出现相同的错误。如果问题仍然存在，请检查其他依赖包的配置情况，可能还有其他包存在类似的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cookcyq

请作者喝杯暖暖的奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值