想开发自己的依赖包或者框架?那么npm link你会用吗?

简介: 想开发自己的依赖包或者框架?那么npm link你会用吗?

目录


前言


npm link是一个很有价值的东西,它可以通过关联的形式替代不停去更新npm仓库包,调试自己的模块,在我们开发自己的模块或者框架时肯定需要用到,接下来就跟着我来学习一下吧。


创建项目


首先我们先创建一个简单项目peoject1,我喜欢加上"type": "module"使用es6模块。


package.json

{
  "name": "project1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module"
}

我们创建一个简单模块

// peoject1/index.js
export const str = 'hello world!'

我们都知道如果我们需要在当前项目中使用该模块需要引入。

// peoject1/test.js
import {str} from './index.js'
console.log(str)


$ node test.js
hello world!

那么出现个问题,如果我需要在其他项目引入呢?

我们再创建一个项目peoject2。

package.json

{
  "name": "project2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module"
}

我们尝试引入project1。

// peoject2/test.js
import {str} from 'project1'
console.log(str)

一定会发现报错了,因为peoject1这个包不存在:Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'project1' imported from ...


这时候你肯定想的到我们只要把project1打包到npm仓库再下载到peoject2就好了。


但是我们万一peoject1项目目前开发阶段需要频繁修改呢?我们不能一直靠重复打包来处理吧。


于是我们可以考虑使用npm link。


npm link关联项目


我们回到project1

$ npm link
added 1 package in 1s

会提示你添加了一个包,添加在哪里了呢?npm全局包的位置。

npm全局包默认位置:C:\Users\admin\AppData\Roaming\npm\node_modules


image.png

接下来再去project2执行关联。

$ npm link project1
added 1 package in 712ms

就会发现这个包被关联进了peoject2的node_modules。

image.png

这时候我们就可以正确运行project2的测试代码了。

$ node test.js
hello world!

而且更棒的是,此时你在project1修改导出的字符串,project2中关联的包会自动更新,不需要重新进行关联就可以进行调试。

使用pnpm自动关联


全局安装pnpm

packages:
  - 'packages/*'

image.png

这代表什么呢,代表packages文件夹下的所有项目,都可以被很容易的被其他项目自动link,底下声明的文件夹都可以称为workspace。

那我们去packages创建一个新项目,就test2好了。

创建一个简单的模块,暴露一个字符串。

image.png

这时候我们想要在test关联test2该怎么做呢?

只要在test的package.json中依赖加入对应的workspace下的项目就好了。

"dependencies": {
  "test2": "workspace:*"
}

image.png

然后在根项目test执行pnpm i,就会自动关联test2到test了。

$ pnpm i
Scope: all 2 workspace projects
Already up-to-date
dependencies:
+ test2 1.0.0 <- packages\test2

image.png

同样创建一个test.js测试

image.png

$ node test.js
hello world!
相关文章
|
1月前
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章介绍了npm的基础知识和常用命令,包括安装包、查看包信息、管理依赖等操作,并提供了如何删除npm安装的镜像以及如何彻底删除node_modules文件夹的具体步骤。
82 2
|
3月前
|
缓存 资源调度 持续交付
在清空NPM缓存后,检查是否所有依赖都已正确安装
在清空NPM缓存后,检查是否所有依赖都已正确安装
|
1月前
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章是关于npm包管理工具的学习、使用指南,包括npm概述、基础命令和如何安装webpack。
58 3
npm学习一:npm 包管理工具 学习、使用。
|
1月前
|
缓存 资源调度 持续交付
在清空NPM缓存后,我如何检查是否所有依赖都已正确安装?
【10月更文挑战第5天】在清空NPM缓存后,我如何检查是否所有依赖都已正确安装?
|
27天前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
1月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
81 0
|
2月前
|
数据安全/隐私保护
发布一个npm包
发布一个npm包
111 2
|
3月前
|
资源调度 JavaScript 索引
Vue2开发插件并发布到npm
这篇文章介绍了如何使用Vue 3、TypeScript和Vite开发一个下拉框组件`vue-amazing-selector`,并将其发布到npm,包括了项目的创建、组件开发、配置webpack、编写组件代码、导出组件、编译、npm包初始化、发布流程以及在项目中使用该插件的完整步骤。
Vue2开发插件并发布到npm
|
3月前
|
缓存 资源调度 持续交付
在清空NPM缓存后,如何检查是否所有依赖都已正确安装
在清空NPM缓存后,如何检查是否所有依赖都已正确安装
|
3月前
|
缓存 前端开发 Linux
哇塞!NPM 缓存竟成开发拦路虎?快来掌握清空秘籍,开启前端开发逆袭之旅!
【8月更文挑战第20天】NPM是前端开发中管理依赖的关键工具。有时需清空其缓存以解决版本不一致或包损坏等问题,确保使用最新依赖。可通过命令`npm cache clean --force`强制清空全部缓存,或手动删除各系统下的缓存文件夹。注意清空缓存可能延长后续安装时间,建议事先备份依赖或确保可重新安装。正确管理缓存有助于提升开发效率。
79 1