【前端語言學(xué)習(xí)】學(xué)習(xí)minipack源碼，了解打包工具的工作原理

toddmark 發(fā)布于2019-08-23 17:13 / 3044人閱讀

摘要：作者王聰學(xué)習(xí)目標(biāo)本質(zhì)上，是一個現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器。為此，我們檢查中的每個導(dǎo)入聲明。將導(dǎo)入的值推送到依賴項數(shù)組中。為此，定義了一個只包含入口模塊的數(shù)組。當(dāng)隊列為空時，此循環(huán)將終止。

作者：王聰

學(xué)習(xí)目標(biāo)

本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

通過minipack這個項目的源碼學(xué)習(xí)了解上邊提到的整個工作流程

demo目錄

.
├── example
      ├── entry.js
      ├── message.js
      ├── name.js

入口文件 entry.js：

// 入口文件 entry.js
import message from "./message.js";

console.log(message);

message.js

// message.js
import {name} from "./name.js";

export default `hello ${name}!`;

name.js

// name.js
export const name = "world";

入口文件

入口起點(diǎn)(entry point)指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。進(jìn)入入口起點(diǎn)后，webpack 會找出有哪些模塊和庫是入口起點(diǎn)（直接和間接）依賴的。

createAsset：生產(chǎn)一個描述該模塊的對象

createAsset 函數(shù)會解析js文本，生產(chǎn)一個描述該模塊的對象

function createAsset(filename) {
  /*讀取文件*/
  const content = fs.readFileSync(filename, "utf-8");
  /*生產(chǎn)ast*/
  const ast = babylon.parse(content, {
    sourceType: "module",
  });
   /* 該數(shù)組將保存此模塊所依賴的模塊的相對路徑。*/
  const dependencies = [];

   /*遍歷AST以嘗試?yán)斫庠撃K所依賴的模塊。 為此，我們檢查AST中的每個導(dǎo)入聲明。*/
  traverse(ast, {
    ImportDeclaration: ({node}) => {
    /*將導(dǎo)入的值推送到依賴項數(shù)組中。*/
      dependencies.push(node.source.value);
    },
  });

  const id = ID++;
   
 /* 使用`babel-preset-env`將我們的代碼轉(zhuǎn)換為大多數(shù)瀏覽器可以運(yùn)行的代碼。*/
  const {code} = transformFromAst(ast, null, {
    presets: ["env"],
  });
  /*返回這個描述對象*/
  return {
    id,
    filename,
    dependencies,
    code,
  };
}

createGraph: 生產(chǎn)依賴關(guān)系圖

function createGraph(entry) {
  // 解析入口文件
  const mainAsset = createAsset(entry);

  /*將使用隊列來解析每個模塊的依賴關(guān)系。 為此，定義了一個只包含入口模塊的數(shù)組。*/
  const queue = [mainAsset];

 /*我們使用`for ... of`循環(huán)迭代隊列。 最初，隊列只有一個模塊，但在我們迭代它時，我們會將其他新模塊推入隊列。 當(dāng)隊列為空時，此循環(huán)將終止。*/
  for (const asset of queue) {
   /*我們的每個模塊都有一個它所依賴的模塊的相對路徑列表。 我們將迭代它們，使用我們的`createAsset（）`函數(shù)解析它們，并跟蹤該模塊在此對象中的依賴關(guān)系。*/
    asset.mapping = {};

    // This is the directory this module is in.
    const dirname = path.dirname(asset.filename);

    // We iterate over the list of relative paths to its dependencies.
    asset.dependencies.forEach(relativePath => {
      // Our `createAsset()` function expects an absolute filename. The
      // dependencies array is an array of relative paths. These paths are
      // relative to the file that imported them. We can turn the relative path
      // into an absolute one by joining it with the path to the directory of
      // the parent asset.
      const absolutePath = path.join(dirname, relativePath);

      // Parse the asset, read its content, and extract its dependencies.
      const child = createAsset(absolutePath);

      // It"s essential for us to know that `asset` depends on `child`. We
      // express that relationship by adding a new property to the `mapping`
      // object with the id of the child.
      asset.mapping[relativePath] = child.id;

      // Finally, we push the child asset into the queue so its dependencies
      // will also be iterated over and parsed.
      queue.push(child);
    });
  }

  // At this point the queue is just an array with every module in the target
  // application: This is how we represent our graph.
  return queue;
}

通過createGraph函數(shù) 生成的依賴關(guān)系對象：

[ 
  { id: 0,
    filename: "./example/entry.js",
    dependencies: [ "./message.js" ],
    code: ""use strict";

var _message = require("./message.js");

var _message2 = _interopRequireDefault(_message);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_message2.default);",
    mapping: { "./message.js": 1 } },

  { id: 1,
    filename: "example/message.js",
    dependencies: [ "./name.js" ],
    code: ""use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _name = require("./name.js");

exports.default = "hello " + _name.name + "!";",
    mapping: { "./name.js": 2 } },

  { id: 2,
    filename: "example/name.js",
    dependencies: [],
    code: ""use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var name = exports.name = "world";",
    mapping: {} } 
    
]

bundle 打包

bundle函數(shù)把上邊得到的依賴關(guān)系對象作為參數(shù)，生產(chǎn)瀏覽器可以運(yùn)行的包

function bundle(graph) {
 let modules = "";
 graph.forEach(mod => {
   modules += `${mod.id}: [
     function (require, module, exports) {
       ${mod.code}
     },
     ${JSON.stringify(mod.mapping)},
   ],`;
 });

 const result = `
   (function(modules) {
     function require(id) {
       const [fn, mapping] = modules[id];
       function localRequire(name) {
         return require(mapping[name]);
       }
       const module = { exports : {} };
       fn(localRequire, module, module.exports);
       return module.exports;
     }
     require(0);
   })({${modules}})
 `;

 // We simply return the result, hurray! :)
 return result;
}

參考例子，最終生產(chǎn)的代碼：

(function (modules) {
    function require(id) {
        const [fn, mapping] = modules[id];

        function localRequire(name) {
            return require(mapping[name]);
        }

        const module = { exports: {} };

        fn(localRequire, module, module.exports);

        return module.exports;
    }

    require(0);
})({
    0: [
        function (require, module, exports) {
            "use strict";
            var _message = require("./message.js");
            var _message2 = _interopRequireDefault(_message);
            function _interopRequireDefault(obj) {
                return obj && obj.__esModule ? obj : { default: obj };
            }

            console.log(_message2.default);
        },
        { "./message.js": 1 },
    ],
    1: [
        function (require, module, exports) {
            "use strict";
            Object.defineProperty(exports, "__esModule", {
                value: true
            });
            var _name = require("./name.js");
            exports.default = "hello " + _name.name + "!";
        },
        { "./name.js": 2 },
    ],

    2: [
        function (require, module, exports) {
            "use strict";
            Object.defineProperty(exports, "__esModule", {
                value: true
            });
            var name = exports.name = "world";
        },
        {},
    ],
})

分析打包后的這段代碼
這是一個自執(zhí)行函數(shù)

(function (modules) {
...
})({...})

函數(shù)體內(nèi)聲明了 require函數(shù)，并執(zhí)行調(diào)用了require(0);
require函數(shù)就是從參數(shù)modules對象中找到對應(yīng)id的 [fn, mapping]
如果模塊有依賴其他模塊的話，就會執(zhí)行傳入的require函數(shù),也就是localRequire函數(shù)

function require(id) {
        // 數(shù)組的解構(gòu)賦值
        const [fn, mapping] = modules[id];

        function localRequire(name) {
            return require(mapping[name]);
        }

        const module = { exports: {} };

        fn(localRequire, module, module.exports); // 遞歸調(diào)用

        return module.exports;
    }

接收一個模塊id，過程如下：

第一步：解構(gòu)module（數(shù)組解構(gòu)），獲取fn和當(dāng)前module的依賴路徑
第二步：定義引入依賴函數(shù)（相對引用），函數(shù)體同樣是獲取到依賴module的id，localRequire 函數(shù)傳入到fn中
第三步：定義module變量，保存的是依賴模塊導(dǎo)出的對象，存儲在module.exports中，module和module.exports也傳入到fn中
第四步：遞歸執(zhí)行，直到子module中不再執(zhí)行傳入的require函數(shù)

要更好了解“打包”的原理，就需要學(xué)習(xí)“模塊化”的知識。

參考：

minipack

minipack源碼分析

云服務(wù)器 GPU云服務(wù)器深度學(xué)習(xí)的了解 asp源碼打包工具深度學(xué)習(xí)了解了解深度學(xué)習(xí)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103990.html

發(fā)表評論

登陸后可評論

0條評論

toddmark

男|高級講師

我要關(guān)注我要私信

TA的文章

OpenCV通道的分離和合并

閱讀 3219·2021-11-23 09:51
基于域名的虛擬主機(jī)是什么-什么是虛擬主機(jī)？

閱讀 3681·2021-09-22 15:35
【機(jī)器學(xué)習(xí)實戰(zhàn) Task1】（KNN）k近鄰算法的應(yīng)用

閱讀 3658·2021-09-22 10:02
搬瓦工，DC2機(jī)房CN2 VPS匯總，電信雙程cn2 gt，聯(lián)通/移動雙程直連

閱讀 2969·2021-08-30 09:49
FxTransit：$16/月/2核/1GB內(nèi)存/10GB SSD硬盤/2TB流量/500Mbps端

閱讀 526·2021-08-05 10:01
微信小程序隱藏客服按鈕，用圖片替代&增加提示卡片可隨時關(guān)閉。

閱讀 3392·2019-08-30 15:54
CSS3漸變效果工具

閱讀 1641·2019-08-30 15:53
前端每日實戰(zhàn)：111# 視頻演示如何用純 CSS 創(chuàng)作一只藝術(shù)的鴨子

閱讀 3569·2019-08-29 16:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【前端語言學(xué)習(xí)】學(xué)習(xí)minipack源碼，了解打包工具的工作原理

相關(guān)文章