最近大屏展示时候用到百度echarts图表库,看完效果图后,又浏览了一下echarts官网案例,大同小异。但是搬砖过程发现实际效果demo相差甚远,一番折腾发现项目安装的是echarts4.x版本,而这次需要用到echarts5.x版本的。由于echarts关联的其他模块已经上线echart图表稳步运行中,echarts4.xecharts5.x引用方式也不相同升级版本不可能的,代价太大,当时在想一个项目是否可以安装多个版本的依赖包呢?事实情况是可以的。

        一个项目echarts安装多个版本其实就是不同版本的包起别名,这样就避免了在package.json文件出现覆盖情况。

        npm 安装别名官网文档介绍

        别名    <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&gt; is the name of the package as it is reified in the node_modules folder, and the <name&gt; refers to a package name as found in the configured registry.

官网给的例子

Examples:

这里 semver: 就是别名

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

  yarn 安装别名官网文档介绍

yarn add <alias-package&gt;@npm:<package&gt;

这将在自定义别名下安装一个包别名允许安装同一依赖的多个版本每个版本通过给定的别名包名进行引用例如yarn add myfoo@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为例,目前项目中已经安装了4.x运行上线

安装echarts5.4.3版本,我项目用的是yarn,所以控制台输入

yarn add echarts5@npm:echarts@5.4.3

安装成功看到package.json 

echarts5.x版本引用方式

import * as echarts from 'echarts5';

当前安装echarts4.x和5.x两个版本,分别为两种命名,在引用时分别引用对应的别名即可

其他:

一个vue组件是否可以同时引用echarts4.x 和 echarts5.x 呢,特意试了一下,没有问题可以同时展示两种。

找了个仪表盘demo同时在一个组件实现

原文地址:https://blog.csdn.net/wuyu0920/article/details/134708090

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_50445.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注