type
status
date
slug
summary
tags
category
icon
password
Edited
Nov 21, 2022 03:41 PM
Created
Nov 7, 2022 02:54 PM
有以下四个文件：
思路
1. 将 js 文件当作一个个函数模块
把每个零散的 js 文件当作是一个个函数（就是一个个模块，函数本身就有这样的性质，把自己和外界隔离开来），这样一来就
require 和 exports 就可以通过传参的方式传递进来（自身没有就从外面拿）变成下面这种形式：
2. 函数名字
由于我们最终会打包生成一个 js 文件，如果源文件多了，也就是函数多了，那我们该怎么区分这些函数呢，我们不可能一个个取名字吧🚫，如果模块很多，取名字和冲突都是问题，所以我们需要有效的区分这些模块，简单点就是给个 id 啦
3. 映射关系 和 require & exports
现在我们已经有了每个函数的映射关系，可以看到
modules[0] 就是我们的入口函数，而我们最终的期望就是去执行这个入口函数，所以先写个简单的执行函数require & exports
require承载的就是模块所需要的依赖，exports承载的就是模块的返回值（好好体会一下）🤔
require本质就是一个函数，作用就是根据路径找到相应的依赖（函数）并执行exports本来是个空对象，但模块导出的东西会挂载到exports这个对象上，就像我们平时导出写的那样exports.xxx = 10，然后才能取到xxx的值
4. 调整模块依赖
现在我们已经可以通过 id 来找到对应的模块了，可是我们
require 的入参是 path，平时写 require 的时候是需要根据路径来找到相应模块的，现在要通过 path 来找到相应的模块对我们来说好像有点变扭😕，所以我们需要对 modules 里面的结构做一些小调整相应的
handle 函数 也要做对应的处理最终结果
代码
我多创建了一个
json 配置文件bundle.config.json
index.js
参考链接：
- 作者:JinSo
- 链接:https://jinso365.top/article/write-js-packing-tool
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。