前言
之前看了下unplugin-auto-import这个库，发现其实现vite、webpack的兼容是基于unplugin的，其实，兼容思路个人觉得不难，难的是如何接入
源码
核心思路
你当然可以暴露出一个函数，接收一个配置对象，指定一个type标识当前是运行与哪一个打包平台，然后配合if...else...去处理不同的逻辑；也可以分别打包出vite、webpack的单独文件，然后配置exports导出，但其实，还可以更好
仍是导出函数，接收配置对象，但是不需要设置if...else...分支，也不需要配置exports，而是利用对象的get属性来转发到不同的目标下做处理，如此，便可以针对不同的平台做单独的处理了
平台化
vite与rollup
从生产构建的角度来说，vite即rollup，因此可以视作一起处理
如上，框红一的位置，对rollup做扩展，使其支持transformInclude和loadInclude这两个过滤接口
框红二的位置，则是对vite或rollup特有的部分做提取合并，也就是对应了如下框红位置的写法
esbuild
esbuild的核心是setup函数，相关的api接口也是通过该函数导出的
这意味着，必须做一层转换处理，根据传入的hook手动调用esbuild的同功能接口
另外，在transform阶段会对源码做改动从而破坏原有的sourceMap，需要进行相关处理
如下，借助@ampproject/remapping来完成sourceMap的合并生成
最后还要重新生成映射地址
正如注释写的一样，为esbuild兼容toString和toUrl接口，避免出错
webpack
webpack不直接接受对象形式，而是要以apply接入
本质上还是根据用户填写的hook去调用webpack的具有相同功能的钩子函数
webpack在plugin之外又提取了loader的概念，一般来说，plugin用于完成某个功能，loader用于对源码进行矫正，因此，需要在plugin中动态的对源码类型的操作做转发，如load和transform
对于非源码操作的，则在plugin自身完成即可
因为分离出来了两个体系，因此要有一种所谓通信的机制，让plugin和loader都知道当前是谁在接手这部分工作
网友评论