我构建了一个简单的 JavaScript 捆绑器，结果比我预期的要容易得多。我将分享我在这篇文章中学到的所有内容。

编写大型应用程序时，最好将 JavaScript 源代码划分为单独的 js 文件，但是使用多个脚本标记将这些文件添加到 html 文档中会引入新问题，例如

• 全局命名空间的污染。

• 竞争条件。

模块捆绑器将不同文件中的源代码合并到一个大文件中，帮助我们享受抽象的好处，同时避免缺点。

模块捆绑器通常分两步完成此操作。

1. 从入口文件开始查找所有的JavaScript源文件。这称为依赖解析，生成的映射称为依赖图。
2. 使用依赖图生成包：一大串可以在浏览器中运行的 JavaScript 源代码。这可以写入文件并使用脚本标记添加到 html 文档。

依赖解析

如前所述，我们在这里

• 取一个入口文件，
• 读取并解析其内容，
• 将其添加到模块数组中
• 找到它的所有依赖项（它导入的其他文件），
• 读取并解析依赖内容
• 向数组添加依赖项
• 查找依赖项的依赖项等等，直到我们到达最后一个模块

我们将这样做（前面有 JavaScript 代码）

在文本编辑器中创建一个bundler.js文件并添加以下代码：

const bundler = (entry)=>{
          const graph = createDependencyGraph(entry)

          const bundle = createBundle(graph)
          return bundle
}

bundler 函数是我们bundler 的主要入口。它获取文件（入口文件）的路径并返回一个字符串（捆绑包）。在其中，它使用 createDependencyGraph 函数生成依赖图。

const createDependencyGraph = (path)=>{
          const entryModule = createModule(path)

          /* other code */
}

createDependencyGraph函数获取入口文件的路径。它使用 createModule 函数生成此文件的模块表示。

let ID = 0
const createModule = (filename)=>{
          const content = fs.readFileSync(filename)
          const ast = babylon.parse(content, {sourceType: “module”})

          const {code} = babel.transformFromAst(ast, null, {
              presets: ['env']
            })

           const dependencies = [ ]
           const id = ID  
           traverse(ast, {
                   ImportDeclaration: ({node})=>{
                       dependencies.push(node.source.value)
                   }
            }
            return {
                           id,
                           filename,
                           code,
                           dependencies
                       }
}

createAsset 函数获取文件的路径并将其内容读取到字符串中。然后该字符串被解析为抽象语法树。抽象语法树是源代码内容的树表示。它可以比作 html 文档的 DOM 树。这使得在代码上运行某些功能变得更容易，例如搜索等。
我们使用babylon解析器从模块创建一个ast。

接下来，在 babel 核心转译器的帮助下，我们将代码内容转换为 es2015 之前的语法，以实现跨浏览器兼容性。
然后使用 babel 中的特殊函数遍历 ast 来查找源文件的每个导入声明（依赖项）。

然后我们将这些依赖项（相对文件路径的字符串文本）推送到依赖项数组中。

我们还创建一个 id 来唯一标识该模块并且
最后我们返回一个代表该模块的对象。该模块包含一个 id、字符串格式的文件内容、依赖项数组和绝对文件路径。

const createDependencyGraph = (path)=>{
          const entryModule = createModule(path)

          const graph = [ entryModule ]
          for ( const module of graph) {
                  module.mapping = { }
module.dependencies.forEach((dep)=>{
         let absolutePath = path.join(dirname, dep);
         let child = graph.find(mod=> mod.filename == dep)
         if(!child){
               child = createModule(dep)
               graph.push(child)
         }
         module.mapping[dep] = child.id
})
          }
          return graph
}

回到 createDependencyGraph 函数，我们现在可以开始生成图表的过程。我们的图表是一个对象数组，每个对象代表我们应用程序中使用的每个源文件。
我们使用入口模块初始化图表，然后循环它。尽管它只包含一项，但我们通过访问入口模块（以及我们将添加的其他模块）的依赖项数组来将项添加到数组的末尾。

dependency 数组包含模块所有依赖项的相对文件路径。该数组被循环，对于每个相对文件路径，首先解析绝对路径并用于创建新模块。该子模块被推到图的末尾，并且该过程重新开始，直到所有依赖项都已转换为模块。
此外，每个模块都给出一个映射对象，该对象简单地将每个依赖项相对路径映射到子模块的 id。
对每个依赖项执行检查模块是否已存在，以防止模块重复和无限循环依赖项。
最后我们返回我们的图表，它现在包含我们应用程序的所有模块。

捆绑

依赖图完成后，生成包将涉及两个步骤

1. 将每个模块包装在一个函数中。这就产生了每个模块都有自己的范围的想法
2. 将模块包装在运行时中。

包装每个模块

我们必须将模块对象转换为字符串，以便我们能够将它们写入到bundle.js 文件中。我们通过将 moduleString 初始化为空字符串来实现此目的。接下来，我们循环遍历图表，将每个模块作为键​​值对附加到模块字符串中，模块的 id 为键，数组包含两项：首先，包装在函数中的模块内容（以赋予其范围，如前所述） ）和第二个包含其依赖项映射的对象。

const wrapModules = (graph)=>{
         let modules = ‘’
           graph.forEach(mod => {
    modules  = `${http://mod.id}: [
      function (require, module, exports) {
        ${mod.code}
      },
      ${JSON.stringify(mod.mapping)},
    ],`;
  });
return modules
}

还要注意，包装每个模块的函数将 require、export 和 module 对象作为参数。这是因为这些在浏览器中不存在，但由于它们出现在我们的代码中，我们将创建它们并将它们传递到这些模块中。

创建运行时

这是在包加载后立即运行的代码，它将为我们的模块提供 require、module 和 module.exports 对象。

const bundle = (graph)=>{
        let modules = wrapModules(graph)
        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}})`;
  return result;
}

我们使用立即调用的函数表达式，它将我们的模块对象作为参数。在其中我们定义了 require 函数，该函数使用模块对象的 id 从模块对象中获取模块。
它构造一个特定于特定模块的 localRequire 函数，以将文件路径字符串映射到 id。以及具有空导出属性的模块对象
它运行我们的模块代码，传递 localrequire、模块和导出对象作为参数，然后返回 module.exports，就像 Node js 模块一样。
最后我们在入口模块（索引 0）上调用 require。

为了测试我们的捆绑器，在我们的bundler.js文件的工作目录中创建一个index.js文件和两个目录：一个src和一个公共目录。

在public目录下创建一个index.html文件，并在body标签中添加以下代码：

常量名称=“大卫”
导出默认名称

also create a hello.js file and add the following code

从‘./name.js’导入名称
const hello = document.getElementById(“root”)
hello.innerHTML = “你好”名称

Lastly in the index.js file of the root directory import our bundler, bundle the files and write it to a bundle.js file in the public directory

const createBundle = require(“./bundler.js”)
const run = (输出, 输入)=>{
让捆绑= creatBundle（条目）
fs.writeFileSync(bundle, ‘utf-8’)
}
运行（“./public/bundle.js”，“./src/hello.js”）

Open our index.html file in the browser to see the magic.

In this post we have illustrated how a simple module bundler works. This is a minimal bundler meant for understanding how these technologies work behind the hood.

please like if you found this insightful and comment any questions you may have.