ast 扣取webpack

发布时间 2023-11-03 18:07:26作者: inks

学了ast 都会自己写扣webpack脚本是吧!!

所以我也写了一份

let fs = require("fs");
let types = require("@babel/types");
let traverse = require("@babel/traverse").default;
let parser = require("@babel/parser");
let generator = require("@babel/generator").default;

let globalobj = {};
let addObj = {};
/** 注入代码
 * 
!function () {
    if (window.flag) {
        console.log("muddle", t);
        if (!e[t]) {
            addObj[t] = globalobj[t];
            eval("e[t] = " + generator(globalobj[t].node.value).code);
        }
    }
}();

 */

//config
require("./env");
require("./input_loader");
window.traverse = traverse;
window.generator = generator;
window.globalobj = globalobj;
window.addObj = addObj;
window.flag = true;

//file
let loaderCode = fs.readFileSync("./input_loader.js", { encoding: "utf-8" });
let muddleCode = fs.readFileSync("./input_muddle.js", { encoding: "utf-8" });

// parserAst
let loaderAST = parser.parse(loaderCode);
let muddleAST = parser.parse(muddleCode);

//遍历所有模块到内存
traverse(muddleAST, {
    ObjectProperty(path) {
        let key = path.node.key;
        if (types.isNumericLiteral(key) || types.isStringLiteral(key)) {
            globalobj[key.value] = path;
        } else if (types.isIdentifier(key)) {
            globalobj[key.name] = path;
        }
    }
});

//导入代码
require("./input_code");

//后面push
traverse(loaderAST, {
    Program(path) {
        let expressSta = path.node.body[0];
        let arg = expressSta.expression.arguments[0];
        for (const key in addObj) {
            arg.properties.push(addObj[key].node);
        }
    }
});

//输出代码
let output = generator(loaderAST).code;
let env = fs.readFileSync("./env.js");
let input_code = fs.readFileSync("./input_code.js");
let code = env + "\n" + output + "\n" + input_code;
fs.writeFileSync('./output.js', code);
View Code

注入代码注入到 

 加载器里面 外面用window._xl 导出加载器;

 加载器放在loader js里面 ,环境代码放到env js里面 要输出的代码放到input_code js里面

webpack 加载器的模块 直接 a={模块}

随便丢到 

导入的模块放到muddle里面  

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["chunk-vendors"] 这种直接复制进去