1. 背景
在使用npm install 安装包时,我们都是使用在npm官方发布的包进行引入。你知道还会有其他几种方式进行引入吗?
本文主要介绍下其他几种方式引入:
- 本地文件夹引入
- 本地压缩包引入
- 远程仓库引入
官方文档:
2. 案例
2.1 项目创建
使用npm create vite创建项目,以引入element-plus为例子。
下载element-plus源码,修改button源码后进行打包,引入dist中的element-plus文件夹。
打包后的进行引入创建后项目,如下:
js
项目
├─ deps
| ├─element-plus
| ├─element-plus.tar.gz
|─ src
| ├─app.vue
| └main.js
main.js
js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus).mount('#app')
app.vue
vue
<template>
<el-button type="primary">你好</el-button>
</template>
2.2 本地文件夹/压缩包引入
-
- 使用文件夹 npm i element-plus ./deps/element-plus
-
- 使用压缩包,使用
tar zcvf element-plus.tar.gz -C ./element-plus .
生成压缩包, -C 不会有element-plus目录,安装npm i element-plus ./deps/element-plus.tar.gz
- 使用压缩包,使用
优势:
- 节省磁盘空间
- 避免修改源代码
两种方式,npm run dev 运行后
2.3 远程地址
可以将打包后放在私服或者github上,此处以github举例:
- 创建一个git仓库,将打包后文件推送到远程,分别将未修改源码的打tag为v2.3.0,修改源码的打tag为v2.3.1。
- 使用
- 未修改源码 tag为v2.3.0 ,安装
npm i element-plus git@github.com:f5l5y5/my-element.git#v2.3.0
- 修改源码 tag为v2.3.1,安装
npm i element-plus git@github.com:f5l5y5/my-element.git#v2.3.1
注意: node版本不同,安装和显示会有所差别,参考官方文章为准
3. 总结
本地测试包时,不需要发到npm,可以方便测试开发。
简单总结下:
-
本地文件夹引入:可以将需要引入的包放置在本地文件夹中,然后使用相对路径或绝对路径进行引入,例如
npm i ./path/to/package
。 -
本地压缩包引入:可以将需要引入的包打包成压缩包(通常是.tar.gz格式),然后使用相对路径或绝对路径进行引入,例如
npm i ./path/to/package.tar.gz
。 -
远程仓库引入:可以将需要引入的包发布到远程仓库(如GitHub),然后使用远程仓库的地址加上指定的版本或标签来进行引入,例如
npm i git@github.com:user/repo.git#v1.0.0
。
注意,不同的包管理工具(如npm、yarn、pnpm)可能对这些引入方式的支持和语法略有差异,请参考对应工具的官方文档进行操作。
如有错误,请指正!O^O!!!