【前端語言學習】學習minipack源碼，了解打包工具的工作原理

shery 發布于2019-08-02 16:15 / 2373人閱讀

摘要：作者王聰學習目標本質上，是一個現代應用程序的靜態模塊打包器。為此，我們檢查中的每個導入聲明。將導入的值推送到依賴項數組中。為此，定義了一個只包含入口模塊的數組。當隊列為空時，此循環將終止。

作者：王聰

學習目標

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

通過minipack這個項目的源碼學習了解上邊提到的整個工作流程

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";

入口文件

入口起點(entry point)指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

createAsset：生產一個描述該模塊的對象

createAsset 函數會解析js文本，生產一個描述該模塊的對象

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

   /*遍歷AST以嘗試理解該模塊所依賴的模塊。 為此，我們檢查AST中的每個導入聲明。*/
  traverse(ast, {
    ImportDeclaration: ({node}) => {
    /*將導入的值推送到依賴項數組中。*/
      dependencies.push(node.source.value);
    },
  });

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

createGraph: 生產依賴關系圖

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

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

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

[ 
  { 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函數把上邊得到的依賴關系對象作為參數，生產瀏覽器可以運行的包

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;
}

參考例子，最終生產的代碼：

(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";
        },
        {},
    ],
})

分析打包后的這段代碼
這是一個自執行函數

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

函數體內聲明了 require函數，并執行調用了require(0);
require函數就是從參數modules對象中找到對應id的 [fn, mapping]
如果模塊有依賴其他模塊的話，就會執行傳入的require函數,也就是localRequire函數

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;
    }

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

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

要更好了解“打包”的原理，就需要學習“模塊化”的知識。

參考：

minipack

minipack源碼分析

云服務器 GPU云服務器深度學習的了解 asp源碼打包工具深度學習了解了解深度學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54958.html

【前端語言學習】學習minipack源碼，了解打包工具的工作原理

摘要：作者王聰學習目標本質上，是一個現代應用程序的靜態模塊打包器。為此，我們檢查中的每個導入聲明。將導入的值推送到依賴項數組中。為此，定義了一個只包含入口模塊的數組。當隊列為空時，此循環將終止。作者：王聰學習目標本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關...

toddmark 2019-08-23 17:13 評論0 收藏0
minipack源碼解析以及擴展

摘要：的變化利用進行前后端通知。例如的副作用，資源只有資源等等，仔細剖析還有很多有趣的點擴展閱讀創建熱更新流程本文示例代碼聯系我前置知識首先可能你需要知道打包工具是什么存在基本的模塊化演變進程對模塊化bundle有一定了解了解babel的一些常識對node有一定常識常見的一些打包工具如今最常見的模塊化構建工具應該是webpack,rollup,fis,parcel等等各...

tangr206 2019-08-23 17:04 評論0 收藏0
打包工具的配置教程見的多了，但它們的運行原理你知道嗎？

摘要：前端模塊化成為了主流的今天，離不開各種打包工具的貢獻。與此同時，打包工具也會處理好模塊之間的依賴關系，最終這個大模塊將可以被運行在合適的平臺中。至此，整一個打包工具已經完成。明白了當中每一步的目的，便能夠明白一個打包工具的運行原理。 showImg(https://segmentfault.com/img/bVbckjY?w=900&h=565); 前端模塊化成為了主流的今天，離不開各...

MoAir 2019-08-22 18:03 評論0 收藏0