vue項目下npm或yarn下安裝echarts多個版本方式

更新時間：2024年06月12日 14:22:22 作者：wuyu0920

這篇文章主要介紹了vue項目下npm或yarn下安裝echarts多個版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue項目下npm或yarn下安裝echarts多個版本

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

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

一個項目echarts安裝多個版本，其實就是給不同版本的包起別名，這樣就避免了在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>

這將在自定義別名下安裝一個包。

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

例如，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為例，目前項目中已經(jīng)安裝了4.x并運行上線了