想开发自己的依赖包或者框架?那么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!
相关文章
|
2月前
|
JavaScript Linux 数据安全/隐私保护
node内网安装npm私服以及依赖包上传发布verdaccio
node内网安装npm私服以及依赖包上传发布verdaccio
97 1
|
4月前
|
缓存 资源调度
解决安装依赖时报错:npm ERR! code ERESOLVE
解决安装依赖时报错:npm ERR! code ERESOLVE
1034 0
解决安装依赖时报错:npm ERR! code ERESOLVE
|
6月前
|
缓存
【已解决】npm安装依赖报错: npm ERR! cb() never called! npm ERR! This is an error with npm itself.
【已解决】npm安装依赖报错: npm ERR! cb() never called! npm ERR! This is an error with npm itself.
369 0
|
2月前
|
缓存 资源调度 JavaScript
Spartacus 2211 开发使用 npm,CCV2 上用 yarn 进行构建
Spartacus 2211 开发使用 npm,CCV2 上用 yarn 进行构建
30 0
|
3月前
|
JavaScript iOS开发 MacOS
掌握NVM、NRM和NPM:Node.js开发的利器
掌握NVM、NRM和NPM:Node.js开发的利器
76 0
|
3月前
|
资源调度 JavaScript 开发工具
从npm慢如蜗牛到飞驰如光:nrm加速你的Node.js开发
从npm慢如蜗牛到飞驰如光:nrm加速你的Node.js开发
130 0
|
3月前
|
JavaScript Java API
云效问题之流水线使用npm制品仓库构建拉取依赖特别慢如何解决
云效仓库是阿里云提供的代码托管和版本控制服务,支持Git等多种版本管理工具;本合集聚焦于云效仓库的使用技巧、团队协作流程以及常见问题解答,旨在帮助开发者更高效地进行代码管理和协作开发。
131 0
|
5月前
|
缓存 前端开发 开发工具
13个NPM快速开发技巧:提升前端开发效率
13个NPM快速开发技巧:提升前端开发效率
118 0
|
5月前
|
资源调度 前端开发
npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...
npm/yarn link 测试包时报错 Warning: Invalid hook call. Hooks can only be called ...
40 0
|
5月前
npm 包本地调试(详细流程:包本地路径、npm link 、yalc)
npm 包本地调试(详细流程:包本地路径、npm link 、yalc)
107 0