阅读背景:

[webpack]手写一个mvp版本的webpack

来源:互联网 
let fs = require("fs");
let path = require("path");

let babylon = require("babylon"); // Babylon 把源码转换为AST
let t = require("@babel/types"); // @babel-types 调换节点
let traverse = require("@babel/traverse").default; // @babel-traverse 遍历节点
let generator = require("@babel/generator").default; // @babel/generator 生成

let ejs = require("ejs"); // js模版

class Compiler {
    // 结构函数
    constructor(config) {
        // entry out
        this.config = config;
        // 1、保留入口文件的路径
        this.entryId;
        // 2、博阿村所有的模块依附
        this.modules = {};
        // 入口路径
        this.entry = config.entry;
        // 工作路径
        this.root = process.cwd();
    }
    // 获得文件源码
    getSource(modulePath){
        let content = fs.readFileSync(modulePath,"utf8");
        return content;
    }
    // 解析源码
    parse(source,parentPath){
        // AST解析语法树
        let ast = babylon.parse(source);
        let dependencies = [];
        traverse(ast,{
            CallExpression(p){
                let node = p.node; // 对应的节点
                if(node.callee.name === "require"){
                    node.callee.name = "__webpack_require__";
                    let moduleName = node.arguments[0].value; // 取到的就是模块的援用名字
                    moduleName = moduleName + (path.extname(moduleName)?"":".js");
                    moduleName = "./"+path.join(parentPath,moduleName);
                    dependencies.push(moduleName);
                    node.arguments = [t.stringLiteral(moduleName)];
                }
            }
        });
        let sourceCode = generator(ast).code;
        return { sourceCode, dependencies }
    }
    // 树立模块
    buildModule(modulePath,isEntry){
        // 拿到模块的内容
        let source = this.getSource(modulePath);
        // 模块id modulePath modulePath-this.root  =  src/index.js
        let moduleName = "./"+path.relative(this.root,modulePath);
        if(isEntry){
             // 保留入口的名字
            this.entryId = moduleName;
        }
        // 解析须要把source源码进行改革,返回一个依附列表
        let {sourceCode,dependencies} = this.parse(source,path.dirname(moduleName));
        this.modules[moduleName] = sourceCode;
        dependencies.forEach(
            // 父模块的加载,递归加载
            (dep)=>{
                this.buildModule(path.join(this.root,dep),false)
            }
        );
    }
    emitFile(){
        // 发射文件
        // 用数据渲染
        // 输前途径
        let main = path.join(this.config.output.path,this.config.output.filename);
        // 模板的路径
        let tempateStr = this.getSource(path.join(__dirname,"main.ejs"));
        let code = ejs.render(tempateStr,{
            entryId:this.entryId,
            modules: this.modules
        });

        // this.assets = {};
        // // 路径对应的代码
        // this.assets[main] = code;
        // fs.writeFileSync(main,this.assets[main]);

        fs.writeFileSync(main,code);
    }
    run() {
        // 履行并创立模块依附关系
        this.buildModule(path.resolve(this.root, this.entry),true);
        // 发射一个打包后的文件
        this.emitFile();
    }
}

module.exports = Compiler;
let fs = require("fs");
let path = require("pat



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: