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

做者：王聰

學習目標

本質上，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";\n\nvar _message = require("./message.js");\n\nvar _message2 = _interopRequireDefault(_message);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconsole.log(_message2.default);',
    mapping: { './message.js': 1 } },

  { id: 1,
    filename: 'example/message.js',
    dependencies: [ './name.js' ],
    code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\n\nvar _name = require("./name.js");\n\nexports.default = "hello " + _name.name + "!";',
    mapping: { './name.js': 2 } },

  { id: 2,
    filename: 'example/name.js',
    dependencies: [],
    code: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nvar 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源碼分析