当前位置：首页 > news >正文

前端模块化CommonJs、ESM、AMD总结

news 2025/7/8 13:13:14

前端开发模式进化史

前端工程化正是为了应对这些演化中出现的挑战和需求而发展起来的：

前后端混合：服务端渲染，javascript仅实现交互
前后端分离：借助 ajax 实现前后端分离、单页应用(SPA)等新模式
模块化开发：npm 管理模块、Webpack 编译打包资源
模块化 + MVVM：基于 React 或 Vue 等框架进行组件化开发，不再手动操作 html 元素

模块化思想

模块化就是把逻辑代码拆分成独立的块，各自封装、互相独立，每个块自行决定对外暴露什么，同时自行决定引入执行哪些外部代码。前端工程化工具和模块化开发使前端项目更易于管理，避免依赖混乱，促进代码的重用和维护。
前端模块化是前端工程化的一个重要组成部分，前者关注代码的组织和结构，而后者关注整个前端开发过程的自动化和最佳实践。前端工程化借助前端模块化来提高代码的组织和可维护性，从而解决前端开发中的一系列问题。

CommonJs

Node.js 实现了 CommonJS 规范，如果前端要使用，需要用browserify库 来进行转化。

//a.js 导出
module.exports = {name: 'ysl',age: '27'
}
//导入
let obj = require('./a.js')
console.log(obj)

或者

//a.js
export.name = 'ysl'
export.age = 27

注意：

require第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。需要清除缓存delete require.cache[require.resolve('./a.js')]再引入。
引入时拷贝机制，引入输出之后，模块内部的变化影响不了原本已经引入的值。
CommonJs加载是同步加载，如果在浏览器中某个模块加载时间太长，容易出现卡死现象。

AMD

AMD采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行

// moduleA.jsdefine(function (){var add = function (x,y){return x+y;};return {add: add};});
// index.jsrequire(['moduleA'], function (moduleA){console.log(moduleA)//moduleA就是moduleA.js模块传入的函数执行后返回的对象{add：function}});

UMD

通过对 CommonJs、CMD、AMD 进一步处理，它没有自己专有的规范，是集结了 CommonJs、CMD、AMD 的规范于一身。
它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行。
未来同一个 JavaScript 包运行在浏览器端、服务区端都只需要遵守同一个写法就行了。

// UMD简单实现
((global, factory) => {//如果 当前的上下文有define函数，并且AMD  说明处于AMD 环境下if (typeof define === 'function' && define.amd) {define(["moduleA"], factory);}else if (typeof exports === 'object') {//commonjslet moduleA = require("moduleA")modules.exports = factory(moduleA)}else {global.moduleA = factory(global.moduleA) //直接挂载成 windows 全局变量 }
})(this, (moduleA) => {//本模块的定义return {}
})

ESM(ECMAScript Moudules)

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。
es6模块的语法分为两部分：export 模块导出、 import模块导入

//export 导出
// profile.js 
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };

//import 引入
// main.js 
import { firstName, lastName, year } from './profile.js';
function setName(element) {element.textContent = firstName + ' ' + lastName;
}//或者用*指定一个对象
// main.js 
import * as total from './profile.js';
function setName(element) {element.textContent = total.firstName + ' ' + total.lastName;
}

用到export default命令，为模块指定默认输出。一个模块只能有一个默认输出，因此export default命令只能使用一次。

// profile.js 
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export default { firstName, lastName, year };// main.js 
import total from './profile.js';
function setName(element) {element.textContent = total.firstName + ' ' + total.lastName;
}

注意：
export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

CommonsJs与ES6之间的差别

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

node和浏览器分别加载es6与commonJs的方式

node加载es6模块的方式

1、 ES6 模块采用.mjs后缀文件名。
2、项目的package.json文件中，指定type字段为module。

（注意：如果没有type字段，或者type字段为commonjs，则.js脚本会被解释成 CommonJS 模块。）

总结为一句话：.mjs文件总是以 ES6 模块加载，.cjs文件总是以 CommonJS 模块加载，.js文件的加载取决于package.json里面type字段的设置。

node默认采用commonJs模块模块的方式

// a.js
module.exports = {name:'ysl}
// main.js
let obj = require('./a.js')
// node环境可以直接使用

浏览器加载es6模块方式

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。

<script type\="module" src\="./foo.js"\></script\>
// 浏览器对于带有\`type="module"\`的\`<script\>\`，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了\`<script\>\`标签的\`defer\`属性。
<script type\="module" src\="./foo.js" defer\></script\>
// 效果一致

通过<script>标签加载，可能会出现跨域的现象，可以使用express解决

浏览器加载CommonJs

浏览器直接加载CommonJs会报错，因为浏览器不存在module、exports、require这些环境变量，可以使用Browserify，对模块进行转换

参考
https://segmentfault.com/a/1190000039346572?sort=newest
https://juejin.cn/post/7291186181157535800