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

shery 發(fā)布于2019-08-02 16:15 / 2377人閱讀

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

作者：王聰

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

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

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

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è)模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。進(jìn)入入口起點(diǎn)后，webpack 會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)（直接和間接）依賴的。

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

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

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

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

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

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

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

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

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

[ 
  { 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)系對(duì)象作為參數(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";
        },
        {},
    ],
})

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

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

函數(shù)體內(nèi)聲明了 require函數(shù)，并執(zhí)行調(diào)用了require(0);
require函數(shù)就是從參數(shù)modules對(duì)象中找到對(duì)應(yīng)id的 [fn, mapping]
如果模塊有依賴其他模塊的話，就會(huì)執(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;
    }

接收一個(gè)模塊id，過程如下：

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

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

參考：

minipack

minipack源碼分析

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/54958.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

shery

男|高級(jí)講師

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

TA的文章

tensorflow

閱讀 2681·2023-04-25 18:10
這可能是實(shí)現(xiàn)登錄框居中最簡(jiǎn)捷的方法

閱讀 1622·2019-08-30 15:53
【譯】CSS 方法論的選擇

閱讀 2819·2019-08-30 13:10
jQuery + Php 實(shí)現(xiàn)類似 Medium 的文章頁(yè)內(nèi)容批注評(píng)論功能

閱讀 3232·2019-08-29 18:40
15、TypeScript 之構(gòu)造器 constructor 方法 methods

閱讀 1137·2019-08-23 18:31
知識(shí)點(diǎn)小記

閱讀 1210·2019-08-23 16:49
js手寫系列-- 圖片懶加載

閱讀 3410·2019-08-23 16:07
【Git】工作中99%能用到的git命令

閱讀 886·2019-08-23 15:27

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章