// 讀取內(nèi)容并提取它的依賴關(guān)系function createAsset(filename) { // 以字符串的形式讀取文件 const content = fs.readFileSync(filename, "utf-8"); // 轉(zhuǎn)換字符串為ast抽象語法樹 const ast = babylon.parse(content, {  sourceType: "module" }); const dependencies = []; // 遍歷抽象語法樹 traverse(ast, {  // 每當(dāng)遍歷到import語法的時候  ImportDeclaration: ({ node }) => {   // 把依賴的模塊加入到數(shù)組中   dependencies.push(node.source.value);  } }); const id = ID++; // 轉(zhuǎn)換為瀏覽器可運行的代碼 const { code } = babel.transformFromAstSync(ast, null, {  presets: ["@babel/preset-env"] }); return {  id,  filename,  dependencies,  code };}

// 從入口開始，分析所有依賴項，形成依賴圖，采用深度優(yōu)先遍歷function createGraph(entry) { const mainAsset = createAsset(entry); // 定義一個保存依賴項的數(shù)組 const queue = [mainAsset]; for (const asset of queue) {  const dirname = path.dirname(asset.filename);  // 定義一個保存子依賴項的屬性  asset.mapping = {};  asset.dependencies.forEach(relativePath => {   const absolutePath = path.join(dirname, relativePath);   const child = createAsset(absolutePath);   // 給子依賴項賦值   asset.mapping[relativePath] = child.id;   // 將子依賴也加入隊列中，循環(huán)處理   queue.push(child);  }); } return queue;}

// 根據(jù)生成的依賴關(guān)系圖，生成瀏覽器可執(zhí)行文件function bundle(graph) { let modules = ""; // 把每個模塊中的代碼放在一個function作用域內(nèi) graph.forEach(mod => {  modules += `${mod.id}:[   function (require, module, exports){    ${mod.code}   },   ${JSON.stringify(mod.mapping)},  ],`; }); // require, module, exports 不能直接在瀏覽器中使用，這里模擬了模塊加載，執(zhí)行，導(dǎo)出操作。 const result = `  (function(modules){   // 創(chuàng)建一個require()函數(shù): 它接受一個 模塊ID 并在我們之前構(gòu)建的模塊對象查找它.   function require(id){    const [fn, mapping] = modules[id];    function localRequire(relativePath){     // 根據(jù)mapping的路徑，找到對應(yīng)的模塊id     return require(mapping[relativePath]);    }    const module = {exports:{}};    // 執(zhí)行轉(zhuǎn)換后的代碼，并輸出內(nèi)容。    fn(localRequire,module,module.exports);    return module.exports;   }   // 執(zhí)行入口文件   require(0);  })({${modules}}) `; return result;}

const graph = createGraph("./entry.js");const result = bundle(graph);