学渣的模块化之路——50行代码带你手写一个common.js规范

一、简述

• 一个js文件就是一个模块
• 会自动把写的代码块套一层闭包
• 浏览器不兼容CommonJS的根本原因，在于缺少四个Node.js环境的变量.(module,export,require,global)

既然没有，我们就手写一个吧，这里先普及下备用的基础知识，请往下看

二、源码中用到的备用知识

fs.accessSync方法

• 判断文件是否存在，不存在则报错
• 
  

  let fs = require("fs");
  fs.accessSync("./x.js") //当前目录中没有该文件则会报错
  

  
  
  
• path.extname方法
  

let path = require('path');
let fs = require('fs');
let vm = require('vm');
// 声明构造函数Module
function Module(filename){
    this.loaded = false; //用于检测是否被缓存过
    this.filename = filename; //文件的绝对路径
    this.exports = {} //模块对应的导出结果
}
//存放模块的扩展名
Module._extensions = ['.js','.json'];
//检测是否有缓存
Module._cache = {};
//拼凑成闭包的数组
Module.wrapper = ['(function(exports,require,module){','\r\n})'];

function req(path) { //自己实现require方法,实现加载模块
    // 根据输入的路径 变出一个绝对路径
    let filename = Module._resolveFilename(path);
    // 通过这个文件名创建一个模块
    let module = new Module(filename);
    module.load(); //让这个模块进行加载 根据不同的后缀加载不同的内容
    return module.exports
}

3、有了这个架构想法，先实现 Module._resolveFilename方法

//如果没写扩展名，我们给它默认添加扩展名
Module._resolveFilename = function (p) {
    p = path.join(__dirname,p);
    if(!/\.\w+$/.test(p)){
        //如果没写扩展名,尝试添加扩展名
        for(let i=0;i

4、此时的filename是存在这个文件的绝对路径,接下来对不同后缀名加载不同的内容

Module.prototype.load = function () {
  // 加载模块本身 js按照js加载 json按照json加载
  let extname = path.extname(this.filename); //判断后缀名
  Module._extensions[extname](this); //把module实例传过去
}

5、先实现加载.json后缀的方法，直接文件读取，并赋值给module.export

// 后缀名为js的加载方法
Module._extensions['.js'] = function (module) {
    //取出加载模块的内容
    let content = fs.readFileSync(module.filename,'utf8');
    // 形成闭包
    let script = Module.wrap(content);
    //让js代码执行
    let fn = vm.runInThisContext(script);
    fn.call(module,module.exports,req,module)
};

//检测是否有缓存
Module._cache = {};
//改造下req方法
function req(path) { //自己实现require方法,实现加载模块
    // 根据输入的路径 变出一个绝对路径
    let filename = Module._resolveFilename(path);
    if(Module._cache[filename]){ //有缓存直接取缓存中的
        return Module._cache[filename].exports;
    }
    // 通过这个文件名创建一个模块
    let module = new Module(filename);
    module.load(); //让这个模块进行加载 根据不同的后缀加载不同的内容
    Module._cache[filename] = module; //第一次加载先缓存
    return module.exports
}

let path = require('path');
let fs = require('fs');
let vm = require('vm');
// 声明构造函数Module
function Module(filename){
    this.loaded = false; //用于检测是否被缓存过
    this.filename = filename; //文件的绝对路径
    this.exports = {} //模块对应的导出结果
}
//存放模块的扩展名
Module._extensions = ['.js','.json'];
//检测是否有缓存
Module._cache = {};
//拼凑成闭包的数组
Module.wrapper = ['(function(exports,require,module){','\r\n})'];
//如果没写扩展名，我们给它默认添加扩展名
Module._resolveFilename = function (p) {
    p = path.join(__dirname,p);
    if(!/\.\w+$/.test(p)){
        //如果没写扩展名,尝试添加扩展名
        for(let i=0;i