javascript模块那些事儿：commonJS和ES module

阿里云国际版折扣https://www.yundadi.com

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

前言

模块定义包管理以及加载问题是所有编程语言不得不面临的问题死生存亡之地不可不察也。

什么是一个模块

一个模块就是一个js/ts文件可以定义函数、类、数据并export出来让外部可见。
不同的规范导出导入的写法不同。

三大规范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())