vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本

最近在大屏展示的時(shí)候，用到了百度的echarts圖表庫，看完效果圖后，又瀏覽了一下echarts官網(wǎng)案例，大同小異。但是搬磚過程中發(fā)現(xiàn)實(shí)際效果和demo相差甚遠(yuǎn)，一番折騰發(fā)現(xiàn)，項(xiàng)目中安裝的是echarts4.x版本，而這次需要用到的echarts5.x版本的。

由于echarts關(guān)聯(lián)的其他模塊已經(jīng)上線，echart圖表穩(wěn)步運(yùn)行中，echarts4.x和echarts5.x 在引用方式也不相同，升級版本是不可能的，代價(jià)太大，當(dāng)時(shí)在想一個(gè)項(xiàng)目是否可以安裝多個(gè)版本的依賴包呢？事實(shí)情況是可以的。

一個(gè)項(xiàng)目echarts安裝多個(gè)版本，其實(shí)就是給不同版本的包起別名，這樣就避免了在package.json文件中出現(xiàn)覆蓋情況。

• npm 安裝別名官網(wǎng)文檔介紹
• 別名 <alias>@npm:<name>

主要由 npm install 之類的命令和 package.json 的依賴部分使用，this 通過別名引用包。

<alias> 是在 node_modules 文件夾中具體化的包的名稱，而 <name> 指的是在配置的注冊表中找到的包名稱。

Primarily used by commands like npm install and in the dependency sections in the package.json, this refers to a package by an alias.

The <alias> is the name of the package as it is reified in the node_modules folder, and the <name> refers to a package name as found in the configured registry.

官網(wǎng)給的例子

Examples：

• semver:@npm:@npmcli/semver-with-patch
• semver:@npm:semver@7.2.2
• semver:@npm:semver@legacy

在這里 semver: 就是別名了

如果你用的yarn 基本上是和npm是一樣的

yarn 安裝別名官網(wǎng)文檔介紹

yarn add <alias-package>@npm:<package>

這將在自定義別名下安裝一個(gè)包。

別名允許安裝同一依賴的多個(gè)版本，每個(gè)版本都通過給定的別名包名稱進(jìn)行引用。 

例如，yarn add my-foo@npm:foo 將在你的 dependencies 中以指定的別名 my-foo 安裝軟件包 foo（最新版本）。

此外，yarn add my-foo@npm:foo@1.0.1 允許安裝特定版本的 foo。

This will install a package under a custom alias.

Aliasing, allows multiple versions of the same dependency to be installed, each referenced via the alias-package name given.

For example, yarn add my-foo@npm:foo will install the package foo (at the latest version) in your dependencies under the specified alias my-foo.

Also, yarn add my-foo@npm:foo@1.0.1 allows a specific version of foo to be installed.

以echarts為例，目前項(xiàng)目中已經(jīng)安裝了4.x并運(yùn)行上線了

安裝echarts5.4.3版本，我項(xiàng)目用的是yarn，所以控制臺輸入

yarn add echarts5@npm:echarts@5.4.3

安裝成功后看到package.json

echarts5.x版本引用方式

import * as echarts from 'echarts5';

當(dāng)前安裝echarts4.x和5.x兩個(gè)版本，分別為兩種命名，在引用時(shí)分別引用對應(yīng)的別名即可。

其他

一個(gè)vue組件中是否可以同時(shí)引用echarts4.x 和 echarts5.x 呢，特意試了一下，沒有問題，可以同時(shí)展示兩種。

找了個(gè)儀表盤的demo同時(shí)在一個(gè)組件中實(shí)現(xiàn)：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論