前端项目使用多个echarts版本的实践方案

一.前言

随着前端技术的发展,许多的第三方库每年都会提升一个大版本.虽然大版本意味着全新的功能,但是可能功能移植不全,或者由于某些原因不会将功能全部移植过来,会产生一段需要两个版本之间各取一些功能的需求,所以我们想要能够在同一个项目当中,同时使用两个不同大版本的同一个第三方库.

二.技术要点

我们知道,npm默认的行为是将第三方库和依赖版本号进行一一对应的,这是默认行为,我们需要npm别名来引入多个版本,其语法如下:

pnpm i alisName@npm:xxx@2.1.3

该指令将依赖xxx的2.1.3版本下载下来,重命名为alisName放入node_modules文件夹当中

三.坑点注意

如果使用别名,那么尽量就把原始的echarts依赖进行移除,全部使用别名进行引用,不然

默认行为下,很多依赖于echarts的第三方库,反而会引入默认的echarts,然后又和其他版本的echarts的API不是配套的,就会报错

或者就会显示未load

四.使用

如果你在下载的时候使用了别名,那么在你的node_modules文件夹里面也是以别名的形式展示,你就需要在你具体的页面里面,将引入的echarts分别改成echarts-v4或者echarts-v5即可