CommonJS模块化规范基础知识随笔

JavaScript并没有与生俱来的模块化概念和功能。

就和人一样，诞生之初我们并不能事先决定好自己可以“自带”哪些天赋，但生长过程中，当我们发现自己需要或者期待某种能力时，我们可以后天习得。

上面的描述恰好适合【JavaScript与“模块化”】

首先，我们先来聊一聊CommonJS。

CommonJS起始于Node.js的模块化实现，对前端领域也产生了深刻的影响。

在CommonJS中，每个文件就是一个独立的模块，文件里面的内容（变量、函数等）都是私有的、拥有独立作用域、对外不可见的。

对于每个模块，我们都有两个变量可以使用，分别是：require 和 module 

1. require（函数）

用于加载某个模块，加载到的具体值就是module.exports返回的对象、函数、变量（如果没有合理的返回值将会报错）。

另外，需要注意的是：

• 在CommonJS中require的是相关模块返回值的拷贝，即原有被导入模块与该require进来的拷贝是互相独立、互不干扰的；
• require函数的执行是同步的（ESM中的import是异步的）；
• 已被加载过的模块会被缓存；

2. module（module.exports/exports）

module代表了当前模块，module上有一个exports属性，它会向外导出需要对外暴露的结果。

同时在相应的独立模块中，会有一个私有的exports变量，默认指向module.exports属性，我们可以将exports理解为一个向外导出的对象。

示例：

// test1.js

var a = 1;
module.exports = {
  a,
};

// run1.js

const obj = require('.test1');
console.log(obj);
// { a: 1 }

 

// test2.js

let a = 1;
exports.a = a;

// run2.js

const obj = require('.test2');
console.log(obj);
// { a: 1 }

 

// test3.js

let a = 1;
module.exports = () => {
  exports.a = a;
  return {
    ...exports,
    b: 0,
  };
};

// run3.js

const fn = require('./test');

console.log(fn());
// { a: 1, b: 0 }

 

// 20220311