npm i 你会用几种方式引入?

1. 背景

在使用npm install 安装包时,我们都是使用在npm官方发布的包进行引入。你知道还会有其他几种方式进行引入吗?

本文主要介绍下其他几种方式引入:

  1. 本地文件夹引入
  2. 本地压缩包引入
  3. 远程仓库引入

官方文档:

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 本地文件夹/压缩包引入

    1. 使用文件夹 npm i element-plus ./deps/element-plus
    1. 使用压缩包,使用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举例:

  1. 创建一个git仓库,将打包后文件推送到远程,分别将未修改源码的打tag为v2.3.0,修改源码的打tag为v2.3.1。
  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,可以方便测试开发。

简单总结下:

  1. 本地文件夹引入:可以将需要引入的包放置在本地文件夹中,然后使用相对路径或绝对路径进行引入,例如npm i ./path/to/package

  2. 本地压缩包引入:可以将需要引入的包打包成压缩包(通常是.tar.gz格式),然后使用相对路径或绝对路径进行引入,例如npm i ./path/to/package.tar.gz

  3. 远程仓库引入:可以将需要引入的包发布到远程仓库(如GitHub),然后使用远程仓库的地址加上指定的版本或标签来进行引入,例如npm i git@github.com:user/repo.git#v1.0.0

注意,不同的包管理工具(如npm、yarn、pnpm)可能对这些引入方式的支持和语法略有差异,请参考对应工具的官方文档进行操作。

如有错误,请指正!O^O!!!

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记8 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin91539 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek