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

前言

模块定义，包管理，以及加载问题是所有编程语言不得不面临的问题，死生存亡之地，不可不察也。
在很多情况下，我们意识不到模块导入方式带来的问题，但是，当你用Nuxt3加载CJS模块时，各种问题就来了。

什么是一个模块？

一个模块就是一个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