commonjs
Commonjs
什么是 CommonJs
- CommonJs 是 js 模块化的社区规范
模块化产生的原因
- 随着前端页面复杂度的提升，依赖的第三方库的增加，导致的 js 依赖混乱，全局变量的污染，和命名冲突
- 单个 js 文件内容太多，导致了维护困难，拆分成为多个文件又会发生第一点描述的问题
- v8 引擎的出现，让 js 有了媲美编译型语言的运行速度，大大激励了前端开发者
CommonJS 的使用环境
- nodejs 实现了 CommonJS 模块化规范
CommonJs 有哪些规定
- 每一个文件就是一个模块
- 模块中的变量和函数不会污染全局（解决了全局污染和命名冲突）
- 提供给外部使用的内容需要导出
- 使用其他模块的内容需要导入 （模块的导入和导出共同解决了 js 依赖混乱的问题）
- 模块不会重复加载，模块第一次导入后会将第一次导入的结果缓存，下次导入时，直接使用缓存的结构
- 省略一些细碎的内容在下面代码中提及.....
commonJS 语法
- 导入
//这是导入一个模块，module.js;commonjs中规定require导入模块时可以省略.js后缀
const module1 = require("./module1");
//如果没有寻找到dir.js文件，而发现了dir路径，则寻找dir路径下package.json 的main属性指定的文件
//如果package.json未指定路径，则触发默认规则 依次查找查找 index.js index.json
const module2 = require("./dir");
//如果require不是相对路径，则会去node_module中寻找该模块，重复module1 和module2 的步骤
//如果没有node_modules 或node_modules 中不存在模块则继续向上级目录寻找node_modules,直到根目录
const module3 = require("module3");
- 导出
module.exports = {
//这里输入导出的内容
};
//这也是导出
exports.a = "a";
//注意 module.exports导出和exports[属性名]导出不可共存
//module.exports会覆盖掉exports导出的内容
简易实现类 nodejs 模块化环境
const fs = require("fs");
const Path = require("path");
const vm = require("vm");
const ModuleStack = [];
function isRootDirectory(path) {
// Windows 根路径
const windowsRootDirectory = /^[a-zA-Z]:\\$/;
// Unix/Linux 根路径/
const unixRootDirectory = /^\//;
return windowsRootDirectory.test(path) || unixRootDirectory.test(path);
}
function isRelativeDirectory(path) {
//匹配 ../ 或者 ./开头的路径
const relativeDirectory = /^(\.\.\/|\.\/).+/;
return relativeDirectory.test(path);
}
// 计算node_modules路径
let computePaths = (dirname) => {
let paths = [];
let path = dirname;
let node_modules = "./node_modules";
while (
!isRootDirectory(path) ||
!paths.includes(Path.resolve(path, node_modules))
) {
paths.push(Path.resolve(path, node_modules));
path = Path.resolve(path, "../");
}
return paths;
};
function myRequire(path) {
let truelyPath;
if (isRelativeDirectory(path)) {
// 获取真实路径
truelyPath = Path.resolve(__dirname, path);
} else {
//获取可能的node_modules路径
let paths = computePaths(__dirname);
for (const item of paths) {
truelyPath = Path.resolve(item, path);
if (fs.existsSync(truelyPath)) {
break;
}
}
if (!truelyPath) {
throw new Error("Can't find module " + path);
}
}
// 如果缓存中有，直接返回
if (myRequire.cache[truelyPath]) {
return myRequire.cache[truelyPath].exports;
}
// 读取文件内容
const content = fs.readFileSync(path, "utf-8");
// 包装代码
const wrapper = [
"(function (exports, require, module, __filename, __dirname) { \n",
"\n})",
];
// 拼接代码
const wrapperContent = wrapper[0] + content + wrapper[1];
// 获取文件路径和文件名
let dirname = Path.dirname(truelyPath);
let filename = truelyPath;
let parentModule =
ModuleStack.length > 0 ? ModuleStack[ModuleStack.length - 1] : null;
// 模块对象
const Module = {
id: Object.keys(myRequire.cache).length > 0 ? filename : ".",
path: dirname,
exports: {},
parent: parentModule,
filename: filename,
loaded: false,
children: [],
paths: computePaths(dirname),
};
if (parentModule) {
parentModule.children.push(Module);
}
//模块入栈
ModuleStack.push(Module);
// 需要运行的函数
const moduleScope = vm.runInThisContext(wrapperContent);
// 运行代码
moduleScope.call(
Module.exports,
Module.exports,
myRequire,
Module,
filename,
dirname
);
// 标记模块已加载
Module.loaded = true;
//模块出栈
ModuleStack.pop();
// 缓存模块
myRequire.cache[truelyPath] = Module;
return Module.exports;
}
myRequire.cache = Object.create(null);
模块化的意义
- 解决在模块化出现之前的js依赖混乱，全局污染命名冲突的问题
- 模块化的出现让js代码可以拆分为多个模块共同协作，单个js文件过长的问题，降低了维护难度。
- 模块化的出现让js开发大型项目出现了可能
ps：当前内容为学习commonjs理解，内容正确性请谨慎甄别。