摘要：模仿實(shí)現(xiàn)簡單的打包工具是一款前端項(xiàng)目構(gòu)建工具，隨著現(xiàn)在前端生態(tài)的發(fā)展，已經(jīng)成為前端開發(fā)人員必備的技能之一，很多開發(fā)人員開始使用和的時(shí)候，都會(huì)使用默認(rèn)的單頁應(yīng)該創(chuàng)建指令來創(chuàng)建一個(gè)工程化項(xiàng)目，實(shí)際上，這些工程化的項(xiàng)目都是基于來搭建的當(dāng)我們熟悉使

webpack是一款前端項(xiàng)目構(gòu)建工具，隨著現(xiàn)在前端生態(tài)的發(fā)展，webpack已經(jīng)成為前端開發(fā)人員必備的技能之一，很多開發(fā)人員開始使用react和vue的時(shí)候，都會(huì)使用默認(rèn)的單頁應(yīng)該創(chuàng)建指令來創(chuàng)建一個(gè)工程化項(xiàng)目，實(shí)際上，這些工程化的項(xiàng)目都是基于webpack來搭建的；
當(dāng)我們熟悉使用這些工程話文件的時(shí)候，我們就會(huì)開始思考，為什么我們寫的代碼直接在瀏覽器運(yùn)行不了，經(jīng)過webpack打包以后就能在瀏覽器上運(yùn)行，打包的過程發(fā)生了什么？

實(shí)際上，webpack 是基于node實(shí)現(xiàn)的，打包的過程包括了讀取文件流進(jìn)行處理和模塊依賴的引入解析和導(dǎo)出等過程，下面來簡單的實(shí)現(xiàn)這么一個(gè)過程。github源碼地址：https://github.com/wzd-front-...

首先，我們新建一個(gè)文件夾，可以命名為bundler，并在命令行工具（黑窗口）中使用npm init進(jìn)行初始化，初始化的過程中，會(huì)要求我們輸入項(xiàng)目相關(guān)的一些信息，如下

Press ^C at any time to quit.
package name: (bundler)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository: (https://github.com/wzd-front-end/bundler.git)
keywords:
author:
license: (ISC)

如果我們想跳過這一個(gè)環(huán)節(jié)，可以使用npm init -y，加上-y后，自動(dòng)生成默認(rèn)配置，不會(huì)再詢問；

接下來，在創(chuàng)建測試用例之前，我們先來構(gòu)建我們的項(xiàng)目，下面是我們的目錄結(jié)構(gòu),src文件夾下面的文件為我們的測試?yán)樱?/p>

--bundler
 --src
    index.js
    message.js
    word.js
 --node_modules
 --bundler.js
 --package.json
 --README.md

word.js代碼

export const word = "hello";

message.js代碼

import { word } from "./word.js";
const message = `say ${word}`;
export default message;

index.js代碼

import message from "./message.js";
console.log(message);

通過觀察上面簡單的三個(gè)文件的代碼，我們會(huì)發(fā)現(xiàn)，這幾段代碼的主要功能模塊的導(dǎo)入和導(dǎo)出解析,這也是打包工具的主要功能，那這些代碼是如何轉(zhuǎn)換為瀏覽器可識別代碼的,接下來，我們來通過代碼演示實(shí)現(xiàn)這個(gè)過程；

首先，我們在bundler文件下創(chuàng)建bundler.js文件，作為我們打包過程的執(zhí)行文件，然后我們?nèi)?zhí)行node bundler.js來執(zhí)行打包的過程；我們先創(chuàng)建一個(gè)名為moduleAnalyser的函數(shù)來解析模塊，該函數(shù)接收一個(gè)filename地址字符串，獲取到對應(yīng)地址的文件，并通過
@babel/parser模塊的parser方法將對應(yīng)的文件字符串轉(zhuǎn)化為抽象節(jié)點(diǎn)樹，不清楚抽象節(jié)點(diǎn)樹的小伙伴可以通過把下面代碼中的ast在控制臺(tái)中打印出來，觀察其結(jié)構(gòu)；在我們生成節(jié)點(diǎn)樹后，我們需要獲取其中的import節(jié)點(diǎn)，很多人可以想著，那通過字符串截取出import字符不就u可以嗎？
當(dāng)只有一個(gè)import的時(shí)候，確實(shí)可以，但多個(gè)的時(shí)候，我們通過截取來實(shí)現(xiàn)就比較復(fù)雜了，這個(gè)時(shí)候，我們可以借助
@babel/traverse來幫我們實(shí)現(xiàn)，具體實(shí)現(xiàn)可以查看babel官網(wǎng)，引入該模塊后，我們可以將parser獲取到ast作為參數(shù)傳入；通過前面輸出的節(jié)點(diǎn)樹我們可以發(fā)現(xiàn)，import 節(jié)點(diǎn)的type類型為ImportDeclaration,我們可以在traverse()的第二個(gè)參數(shù)中傳入一個(gè)對象，以節(jié)點(diǎn)的type類型作為名稱，可以幫我們獲取到對應(yīng)的節(jié)點(diǎn)，最后我們再將處理后的ast重新轉(zhuǎn)化為代碼字符串返回，具體實(shí)現(xiàn)如下：

const fs = require("fs")
const path = require("path")
const parser = require("@babel/parser")
const traverse = require("@babel/traverse").default;
const babel = require("@babel/core");

const moduleAnalyser = (filename) => {
    // 通過fs模塊的異步讀取文件api獲取傳入路徑的文件，編碼格式為"utf-8"
    const content = fs.readFileSync(filename, "utf-8");
    // 通過parser.parse方法將讀取到的代碼轉(zhuǎn)化為抽象節(jié)點(diǎn)樹，其中sourceType類型是指定導(dǎo)入文件的方式
    const ast = parser.parse(content, {
        sourceType: "module"
    });
    const dependencies = {}
    // 通過traverse獲取節(jié)點(diǎn)樹中類型為ImportDeclaration的節(jié)點(diǎn)，并將其映射關(guān)系保存到dependencies對象中
    traverse(ast, {
        ImportDeclaration({ node }) {
            // 獲取傳入路勁的根路徑
            const dirname = path.dirname(filename)
            // 拼接文件中實(shí)際引入文件的路徑

            const newFile = dirname + node.source.value
            // 將映射關(guān)系存入dependencies對象中
           dependencies[node.source.value] = newFile
        }
    })
    // 利用presets將ast轉(zhuǎn)化為對應(yīng)的es5代碼，第一個(gè)參數(shù)是抽象節(jié)點(diǎn)樹，第二個(gè)參數(shù)是源碼，第三個(gè)參數(shù)是配置
    const { code } = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]
    })
    return {
        filename,
        dependencies,
        code
    }
}
console.log(moduleAnalyser("./src/index.js"))

通過上面代碼，我們可以得到一個(gè)模塊入口文件的分析，包括模塊的名稱，依賴以及代碼，但我們只是得到一個(gè)入口文件的解析，入口模塊里面有自己的依賴，依賴?yán)锩嬗钟凶约旱囊蕾?，因此，我們需要去對每一個(gè)模塊進(jìn)行深度分析；

....
// 用于循環(huán)調(diào)用多個(gè)模塊
const makeDependenciesGraph = (entry) => {
  // 首先獲取入口模塊的分析對象
  const entryModule = moduleAnalyser(entry)
  // 保存全部模塊的分析對象
  const graphArray = [entryModule]
  // 對graphArray 中的每一項(xiàng)進(jìn)行分析，分析每一項(xiàng)中的dependencies，如果存在，我們就把新的依賴模塊進(jìn)行分析，直到全部查找完為止
  for (let i = 0; i < graphArray.length; i++) {
    const item = graphArray[i]
    const {dependencies} = item
    // 如果dependencies不為空對象,就利用for..in枚舉對象中每個(gè)依賴模塊，將依賴模塊的路徑存入，分析生成新的分析結(jié)果對象，存入到graphArray數(shù)組中
    if (JSON.stringify(dependencies) !== "{}") {
      for (let j in dependencies) {
        graphArray.push(moduleAnalyser(dependencies[j]))
      }
    }
  }
  // 我們把最后的結(jié)果通過每個(gè)分析結(jié)果對象的filename作為key值，存入graph對象中，目的是為了方便后續(xù)通過模塊路徑進(jìn)行取值
  const graph = {}
  graphArray.forEach(item => {
    graph[item.filename] = {
      dependencies: item.dependencies,
      code: item.code
    }
  })
  return graph
}
console.log(makeDependenciesGraph("./src/index.js"))

執(zhí)行完上面的操作后，我們通過入口文件進(jìn)入后所有相關(guān)的模塊已經(jīng)全部解析完畢，接下來，我們需要把這些模塊，轉(zhuǎn)化為瀏覽器可以執(zhí)行的代碼，轉(zhuǎn)化后生成的代碼中，我們會(huì)發(fā)現(xiàn)，包含了require方法和export對象，這都是我們?yōu)g覽器不具備的，我們需要進(jìn)一步聲明對應(yīng)的方法，讓瀏覽器能找到對應(yīng)的方法去執(zhí)行，接下來我們執(zhí)行最后一步的生成代碼操作

....
const generateCode = (entry) => {
  // 因?yàn)槲覀冃枰祷貙?yīng)的可執(zhí)行字符串，所以我們需要把對象先轉(zhuǎn)化為字符串，不然會(huì)出現(xiàn)"[object, object]"
  const graph = JSON.stringify(makeDependenciesGraph(entry));
  // 返回字符串使用模板字符串，且使用到閉包，防止污染全局
  return `
        (function(graph){
            function require(module) { 
                function localRequire(relativePath) {
                    return require(graph[module].dependencies[relativePath]);
                }
                var exports = {};
                (function(require, exports, code){
                    eval(code)
                })(localRequire, exports, graph[module].code);
                return exports;
            };
            require("${entry}")
        })(${graph});
    `;
}
const code = generateCode("./src/index.js")
console.log(code)

最后我們在控制臺(tái)輸出的代碼，復(fù)制到瀏覽器的控制抬中執(zhí)行，按照預(yù)定的結(jié)果運(yùn)行打印出結(jié)果，運(yùn)行代碼如下：

(function(graph){
  function require(module) {
    function localRequire(relativePath) {
      return require(graph[module].dependencies[relativePath]);
    }
    var exports = {};
    (function(require, exports, code){
      eval(code)
    })(localRequire, exports, graph[module].code);
    return exports;
  };
  require("./src/index.js")
})({"./src/index.js":{"dependencies":{"./message.js":"./srcmessage.js"},"code":""use strict";

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

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

console.log(_message["default"]);"},"./srcmessage.js":{"dependencies":{"./word.js":"./srcword.js"},"code":""use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _word = require("./word.js");

var message = "say ".concat(_word.word);
var _default = message;
exports["default"] = _default;"},"./srcword.js":{"dependencies":{},"code":""use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.word = void 0;
var word = "hello";
exports.word = word;"}});

以上的代碼就是我們打包后的代碼，我們會(huì)發(fā)現(xiàn)，在我們打包后，需要用到其他的模塊的時(shí)候，會(huì)調(diào)用require 方法，require方法又會(huì)通過傳入的地址路徑參數(shù)去查詢我們生成的以filename為key值的對象，找到對應(yīng)的code，利用eval()方法去執(zhí)行，這就是打包工具的一個(gè)基本原理。