为什么需要模块化

当前端工程到达一定规模后，就会出现下面的问题：

全局变量污染
依赖混乱

上面的问题，共同导致了代码文件难以细分

模块化就是为了解决上面两个问题出现的

模块化出现后，我们就可以把臃肿的代码细分到各个小文件中，便于后期维护管理

前端模块化标准

前端主要有两大模块化标准：

CommonJS，简称CMJ，这是一个社区规范，出现时间较早，目前仅node环境支持
ES Module，简称ESM，这是随着ES6发布的官方模块化标准，目前浏览器和新版本node环境均支持

node环境

下载地址：nodejs.org/zh-cn/

CommonJS如何实现模块化

node天生支持CommonJS模块化标准

node规定：

node中的每个js文件都是一个CMJ模块，通过node命令运行的模块，叫做入口模块。每一个js文件就是一个模块。
模块中（每个js文件）的所有全局定义的变量、函数，都不会污染到其他模块
模块可以暴露（导出）一些内容给其他模块使用，需要暴露什么内容，就在模块中给module.exports赋值
一个模块可以导入其他模块，使用函数require("要导入的模块路径")即可完成，该函数返回目标模块的导出结果
1. 导入模块时，可以省略.js
2. 导入模块时，必须以./或../开头
一个模块在被导入时会运行一次，然后它的导出结果会被node缓存起来，后续对该模块导入时，不会重新运行，直接使用缓存结果

例子

下面例子是main.js 要用到math.js的一些函数。

console.log("start");
// js 文件后缀可以省略，文件路径必须以 ./(当前目录) ../(上级目录)开头，对于 ./的情况也是不能省略的。
let math = require("./math.js");
math = require("./math.js");
console.log(math.sum(1,2));

console.log("math start");
// 提供一些数学函数
function isOdd(n){
    return n % 2 !== 0;
}

function sum(a, b){
    return a + b;
}

// 导出的类型可以是任何类型的
// module.exports = 123，那么导出的就是123
// module.exports = isOdd,那么导出的就是isOdd这个方法。
module.exports = {
    isOdd,
    sum,
};

1.前端工程化

为什么需要模块化

前端模块化标准

CommonJS如何实现模块化

例子