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!!!

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#