前端增量引用的设计

98 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情

我们开发一个具有可扩展的插件系统,需要考虑很多方面。比如要暴露什么杨扩展能力给插件开发者,这些插件能力如何能在整个系统中合理的存在,都需要仔细思考。

如果我们用npm体系去承载插件系统,有一个问题是我们不得不考虑的,就是增量引用的问题。

增量引用的时候,我们需要从a引入b,然后b里引入一堆乱七八糟的包c们。那么这么一套机制是如何实现的呢。我们需要一套针对于a的增量引用配置,当想从a引入一个c,那么实际上通过增量引用的转换,最终转换为直接引入c。这样的方式是最简单,但是这里有一些问题:

  1. 比如antd4这种的,只支持增量引用的库,该怎么处理 现在antd4没有一个统一的入口,全部都是增量的入口;这种的有两个方案:1. 支持antd.button语法,兼容增量引用的方式;2. 引入一个js文件,引入这个文件即可引入一个全局的antd对象,非常的方便;这两种方式可以同时支持
  2. antd还有另外一个问题,就是可能存在多版本的问题,这个也是俩解决方案,一个就是搞一个js文件去引入;另外一个就是利用重命名机制,去重命名一个antd包,比如命名为antdv4,这样,就可以在不影响原有包的基础上实现俩包的共存。但是这种方案还需要考虑下css的问题,确保俩包的css不会出现同名覆盖的情况。
  3. 其他的库怎么确保影子库的方式能够正确的引用到。这个需要通过确保npm版本稳定,确立统一的标准,或者我们可以b锁版本,引用b的nodemodules文件夹里库。

前端增量引用总体可以用antd的增量引用包,支持非常细致的配置,能满足常见的需求。