【文件属性】:
文件名称:minipack:小型 JavaScript 打包器
文件大小:86KB
文件格式:ZIP
更新时间:2021-05-02 09:41:29
JavaScript
作为一个前端开发人员,我们花费大量的时间去处理 webpack、gulp 等打包工具,将高级 JavaScript 项目打包成更复杂、更难以解读的文件包,运行在浏览器中,那么理解 JavaScript 打包机制就很必要,它帮助你更好的调试项目、更快的定位问题产生的问题,并且帮助你更好的理解、使用 webpack 等打包工具。
一、运行
安装依赖
npm install
打包
npm run build
运行
npm start
二、原理
打包不过是,从入口文件开始,将所有模块及依赖的模块输出到包文件中,并且可以在浏览器中运行。那么它就分为四步:
获取入口文件内容,及其所有依赖
依次获取所有的依赖模块内容,及其依赖的依赖,…,获取整个依赖图
将依赖图包装进一个能够在所有浏览器运行的立即执行函数
输出到 ./dist/bundle.js
方案设计机原理解读详见:
完整打包代码及解释详见:
示
【文件预览】:
minipack-master
----.gitignore(12B)
----package.json(552B)
----package-lock.json(192KB)
----src()
--------name.js(29B)
--------entry.js(113B)
--------hello.js(28B)
--------message.js(140B)
----webpack.config.js(317B)
----minipack.config.js(177B)
----dist()
--------index.html(310B)
--------index.bundle.js(6KB)
--------bundle.js(2KB)
----index.js(6KB)
----README.md(1KB)
----yarn.lock(136KB)