前言
模块定义,包管理,以及加载问题是所有编程语言不得不面临的问题,死生存亡之地,不可不察也。
什么是一个模块?
一个模块就是一个js/ts文件,可以定义函数、类、数据,并export出来让外部可见。
不同的规范,导出导入的写法不同。
自从诞生了ESM,前端模块化方案逐步从IIFE、UMD、AMD、CommonJS、ESM等诸多模块化方案,逐步收敛到了ESM和CJS之争。
三大规范:AMD、CMD、CommonJs
- AMD是RequireJS在推广过程中对模块定义的规范化产出,它是一个概念,RequireJS是对这个概念的实现,就好比JavaScript语言是对ECMAScript规范的实现。AMD是一个组织,RequireJS是在这个组织下自定义的一套脚本语言。
RequireJS:是一个AMD框架,可以异步加载JS文件,按照模块加载方法,通过define()函数定义,第一个参数是一个数组,里面定义一些需要依赖的包,第二个参数是一个回调函数,通过变量来引用模块里面的方法,最后通过return来输出。
是一个依赖前置、异步定义的AMD框架(在参数里面引入js文件),在定义的同时如果需要用到别的模块,在最前面定义好即在参数数组里面进行引入,在回调里面加载。
- CMD—是SeaJS在推广过程中对模块定义的规范化产出,是一个同步模块定义,是SeaJS的一个标准,SeaJS是CMD概念的一个实现,SeaJS是淘宝团队提供的一个模块开发的js框架。
通过define()定义,没有依赖前置,通过require加载jQuery插件,CMD是依赖就近,在什么地方使用到插件就在什么地方require该插件,即用即返,这是一个同步的概念
- CommonJS规范—是通过module.exports定义的,在前端浏览器里面并不支持module.exports,通过node.js后端使用的。Nodejs端是使用CommonJS规范的,前端浏览器一般使用AMD、CMD、ES6等定义模块化开发的。
什么是CJS和ESM模块(ES6 module)?
- CJS模块就是通过CommonJS规范定义的模块,即module.exports/require导出导入方式。
- ESM模块就是符合ES6规范定义的模块,即export/import方式。import有静态导入和动态导入两种方式。
- CJS模块和ESM模块都可以通过javascript或typescript来编写。
CJS模块只能运行在Nodejs后端,ES6模块可以运行在nodejs端,也可以运行在浏览器端,当然不是所有浏览器都支持。
文件名与模块类型
- 以 .mjs结尾的被当做 ESM 模块
- 以.cjs 结尾的被当做 CJS 模块
- 以 .js 结尾的默认被当做 CJS 模块,但是,如果package.json里定义了 type: ‘module’,就被当做ESM模块
导入规则
我们可以在ES6 module里导入CJS模块,但是在CJS模块里不能用require()导入ES6模块,只能用import函数。
例子
一个ES6模块的定义
functions.mjs文件:
export default function(msg) {return `Default: ${msg}`
}export function myFunction(msg) {return `Hello: ${msg}`
}export const PI = 3.1415926
一个CJS模块的定义
cjs_module.cjs文件:
module.exports = {func1: function() {return 'this is func1'},func2: function() {return 'this is func2'}
}// or
// exports.test = 123
在ES6模块里调用
module_test.js文件:
import {myFunction} from './functions.mjs'
import sayHello from './functions.mjs' import { func1 } from './cjs_module.cjs'
import { default as pkg } from './cjs_module.cjs'console.log(myFunction('laohu'))
console.log(sayHello('laowang'))console.log(func1())
console.log(pkg.func1())
注意:
- export default导出的函数,和非default函数的导入写法不同
- 导入cjs模块的两种写法。可以给导入模块起个别名,如上面的default as pkg