libin1991 / minipack Goto Github PK

作为一个前端开发人员，我们花费大量的时间去处理 webpack、gulp 等打包工具，将高级 JavaScript 项目打包成更复杂、更难以解读的文件包，运行在浏览器中，那么理解 JavaScript 打包机制就很必要，它帮助你更好的调试项目、更快的定位问题产生的问题，并且帮助你更好的理解、使用 webpack 等打包工具。

一、运行

1. 安装依赖

   npm install

2. 打包

   npm run build

3. 运行

   npm start

二、原理

打包不过是，从入口文件开始，将所有模块及依赖的模块输出到包文件中，并且可以在浏览器中运行。那么它就分为四步：

• 获取入口文件内容，及其所有依赖
• 依次获取所有的依赖模块内容，及其依赖的依赖，…，获取整个依赖图
• 将依赖图包装进一个能够在所有浏览器运行的立即执行函数
• 输出到 ./dist/bundle.js

方案设计机原理解读详见：窥探原理：JavaScript 模块捆绑器

完整打包代码及解释详见：index.js

示例代码详见：src

打包后的文件详见：bundle.js