webpack模块化

模块化

模块化是一种思想，是一种把复杂系统分解为更好的可管理模块的方式。

• 把具有一定独立功能的代码放到一个单独的文件中，每一个文件就是一个模块。

CommonJS

参考大佬公众号文章

CommonJS 主要运行于服务器端，该规范指出，一个单独的文件就是一个模块。Node.js为主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。require 命令用于输入其他模块提供的功能，module.exports命令用于规范模块的对外接口，输出的是一个值的拷贝，输出之后就不能改变了，会缓存起来。

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作

// 模块 a.js
const name = 'qiufeng'

module.exports = {
   
    name,
    github: 'https://github.com/hua1995116'
}

require(‘xxx’)得到的是module.exports对象，需要解构出里面的内容

// 模块 b.js
// 引用核心模块或者第三方包模块，不需要写完整路径
const path = require('path');
// 引用自定义模块可以省略.js
const {
    name, github } = require('./a');

console.log(name, github, path.basename(github));
// 输出 qiufeng https://github.com/hua1995116 hua1995116

• CommonJS 采用同步加载模块，而加载的文件资源大多数在本地服务器，所以执行速度或时间没问题。但是在浏览器端，限于网络原因，如果用同步加载模块,在浏览器中会出现堵塞情况，所以不适用，更合理的方案是使用异步加载。
• CommonJS 的规范中，每个 JavaScript 文件就是一个独立的模块上下文（module context），在这个上下文中默认创建的属性都是私有的。也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。