想开发自己的依赖包或者框架?那么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!
相关文章
|
5月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
426 9
|
11月前
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章介绍了npm的基础知识和常用命令,包括安装包、查看包信息、管理依赖等操作,并提供了如何删除npm安装的镜像以及如何彻底删除node_modules文件夹的具体步骤。
290 2
|
缓存 资源调度 持续交付
在清空NPM缓存后,检查是否所有依赖都已正确安装
在清空NPM缓存后,检查是否所有依赖都已正确安装
|
8月前
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
203 3
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
|
8月前
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
851 5
|
11月前
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章是关于npm包管理工具的学习、使用指南,包括npm概述、基础命令和如何安装webpack。
306 3
npm学习一:npm 包管理工具 学习、使用。
|
11月前
|
缓存 资源调度 持续交付
在清空NPM缓存后,我如何检查是否所有依赖都已正确安装?
【10月更文挑战第5天】在清空NPM缓存后,我如何检查是否所有依赖都已正确安装?
|
12月前
|
数据安全/隐私保护
发布一个npm包
发布一个npm包
264 2
|
11月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
184 0
|
11月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
794 0

推荐镜像

更多
  • NPM