学渣的模块化之路——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<Module._extensions.length;i++){
            let filePath = p + Module._extensions[i];//拼接出一个路径
            // 判断文件是否存在
            try{
                fs.accessSync(filePath);
                return filePath;

            }catch (e) {
                throw new Error('module not found')
            }
        }
    }else {
        return p
    }
}

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<Module._extensions.length;i++){
            let filePath = p + Module._extensions[i];//拼接出一个路径
            // 判断文件是否存在
            try{
                fs.accessSync(filePath);
                    return filePath;
            }catch (e) {
                throw new Error('module not found')
            }
        }
    }else {
        return p
    }
}
Module.wrap = function(content){
    return Module.wrapper[0] + content +Module.wrapper[1];
};
// 加载模块本身
Module.prototype.load = function () {
    let extname = path.extname(this.filename);
    // js按照js加载,json按照json加载
    Module._extensions[extname](this);
};
// 后缀名为json的加载方法
Module._extensions['.json'] = function (module) {
    let content = fs.readFileSync(module.filename,'utf8');
    module.exports = JSON.parse(content);
};
// 后缀名为js的加载方法
Module._extensions['.js'] = function (module) {
    let content = fs.readFileSync(module.filename,'utf8');
    // 形成闭包
    let script = Module.wrap(content);
    let fn = vm.runInThisContext(script);
    fn.call(module,module.exports,req,module)
};
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 str = req('./b');
console.log(str);