minipack

一直使用 webpack 打包项目，但不知道它的原理是什么，给自己有一种很飘的感觉，所以花时间专门学习 webpack。

简单的模块打包工具

webpack官网有一个视频，介绍怎么构建自己的 webpack， BUILD YOUR OWN WEBPACK by Ronen Amiel和 示例代码

怎样得到文件的依赖图谱呢？

打包工具有一个 entry 入口文件，通过分析入口文件，得到入口文件的依赖，维护当前文件的依赖列表。然后循环依赖列表，再得到依赖文件的依赖。每个依赖都要自己的模块 id，通过模块 id 可以很方便的找到文件。

Babylon 是 Babel 中使用的 JavaScript 解析器，通过 babylon 得到 AST，在 AST 中，可以得到当前文件的依赖文件列表。
同时可以将得到的 AST 使用其他的 loader 转译代码，比如：通过 babel-core 将 es6 转译成 es5。

怎样执行代码

上一步已经得到了依赖图谱，通过依赖图谱，生成以 id 为 key 的 模块 map,这样可以很快的通过 id 找到对应的模块。

(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}})

通过自定义 require 函数，将生成的 code 中根据文件路径 require的文件，替换为对应的模块。
通过传入函数内部的 module对象，通过对象引用的方式，拿到模块导出的值。