怎么實(shí)現(xiàn)一個(gè)webpack模塊解析器-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)怎么實(shí)現(xiàn)一個(gè)webpack模塊解析器的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供鐘樓網(wǎng)站建設(shè)、鐘樓做網(wǎng)站、鐘樓網(wǎng)站設(shè)計(jì)、鐘樓網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、鐘樓企業(yè)網(wǎng)站模板建站服務(wù)，10年鐘樓做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

整體流程分析

1、讀取入口文件。

2、將內(nèi)容轉(zhuǎn)換成 ast 語法樹。

3、深度遍歷語法樹，找到所有的依賴，并加入到一個(gè)數(shù)組中。

4、將 ast 代碼轉(zhuǎn)換回可執(zhí)行的 js 代碼。

5、編寫 require 函數(shù)，根據(jù)入口文件，自動執(zhí)行完所有的依賴。

6、輸出運(yùn)行結(jié)果。

createAsset

// 讀取內(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語法的時(shí)候
  ImportDeclaration: ({ node }) => {
   // 把依賴的模塊加入到數(shù)組中
   dependencies.push(node.source.value);
  }
 });

 const id = ID++;

 // 轉(zhuǎn)換為瀏覽器可運(yùn)行的代碼
 const { code } = babel.transformFromAstSync(ast, null, {
  presets: ["@babel/preset-env"]
 });

 return {
  id,
  filename,
  dependencies,
  code
 };
}

createGraph

// 從入口開始，分析所有依賴項(xiàng)，形成依賴圖，采用深度優(yōu)先遍歷
function createGraph(entry) {
 const mainAsset = createAsset(entry);

 // 定義一個(gè)保存依賴項(xiàng)的數(shù)組
 const queue = [mainAsset];

 for (const asset of queue) {
  const dirname = path.dirname(asset.filename);

  // 定義一個(gè)保存子依賴項(xiàng)的屬性
  asset.mapping = {};

  asset.dependencies.forEach(relativePath => {
   const absolutePath = path.join(dirname, relativePath);

   const child = createAsset(absolutePath);

   // 給子依賴項(xiàng)賦值
   asset.mapping[relativePath] = child.id;

   // 將子依賴也加入隊(duì)列中，循環(huán)處理
   queue.push(child);
  });
 }
 return queue;
}

bundle

// 根據(jù)生成的依賴關(guān)系圖，生成瀏覽器可執(zhí)行文件
function bundle(graph) {
 let modules = "";

 // 把每個(gè)模塊中的代碼放在一個(gè)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)建一個(gè)require()函數(shù): 它接受一個(gè) 模塊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;
}

執(zhí)行解析

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

感謝各位的閱讀！關(guān)于“怎么實(shí)現(xiàn)一個(gè)webpack模塊解析器”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：怎么實(shí)現(xiàn)一個(gè)webpack模塊解析器-創(chuàng)新互聯(lián)
本文地址：http://www.muchs.cn/article40/deoieo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站營銷、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、域名注冊、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容