Javascript 中的 CJS, AMD, CDM,UMD , ESM,SystemJS模块化方式

991 阅读1分钟

CJS

commonJS的主要实现者是Node.js。通过exports和require

image.png commonJS模块的加载不适合网络加载,依赖的模块未加载会出现错误

AMD(Asynchronous Module Definition-异步模块定义)

定义模块define(id?, dependencies?, factory)

主要实现者:requireJS

image.png

CMD(Common Module Definition - 通用模块定义)

实现:SeaJS

AMD的优化版

  • AMD是依赖前置,提前加载依赖;CMD依赖后置,使用时才加载
  • require.js已经提供来延迟加载功能

UMD(Universal Module Definition - 通用模块定义)

CommonJS侧重服务器,而AMD侧重于浏览器,两者的模块不能共享

UMD的思想很简单

判断是AMD则使用AMD方式

是commonJS则使用CommonJS方式

都不是则将模块公开给全局(window或global)

image.png

ESM

ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。 如下:

import vue from 'vue';
import {foo, bar} from './myLib';
...

export default function() {
  // your Function
};
export const function1() {...};
export const function2() {...};

SystemJS

SystemJS是一个通用的模块加载器,它能在浏览器或者NodeJS上动态加载模块

并且支持CommonJS、AMD、全局模块对象和ES6模块。通过使用插件,它不仅可以加载Js,还可以加载CoffeeScript和TypeScript。

SystemJS的另一个优点是,它建立在ES6模块加载器之上,所以它的语法和API在将来很可能是语言的一部分,这会让我们的代码更不会过时。

AngularJS里面就会使用

image.png

相关图片

image.png

参考资料: