想开发自己的依赖包或者框架?那么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!
相关文章
|
22天前
|
缓存 资源调度 持续交付
在清空NPM缓存后,检查是否所有依赖都已正确安装
在清空NPM缓存后,检查是否所有依赖都已正确安装
|
22天前
|
资源调度 JavaScript 索引
Vue2开发插件并发布到npm
这篇文章介绍了如何使用Vue 3、TypeScript和Vite开发一个下拉框组件`vue-amazing-selector`,并将其发布到npm,包括了项目的创建、组件开发、配置webpack、编写组件代码、导出组件、编译、npm包初始化、发布流程以及在项目中使用该插件的完整步骤。
Vue2开发插件并发布到npm
|
29天前
|
缓存 资源调度 持续交付
在清空NPM缓存后,如何检查是否所有依赖都已正确安装
在清空NPM缓存后,如何检查是否所有依赖都已正确安装
|
1月前
|
缓存 前端开发 Linux
哇塞!NPM 缓存竟成开发拦路虎?快来掌握清空秘籍,开启前端开发逆袭之旅!
【8月更文挑战第20天】NPM是前端开发中管理依赖的关键工具。有时需清空其缓存以解决版本不一致或包损坏等问题,确保使用最新依赖。可通过命令`npm cache clean --force`强制清空全部缓存,或手动删除各系统下的缓存文件夹。注意清空缓存可能延长后续安装时间,建议事先备份依赖或确保可重新安装。正确管理缓存有助于提升开发效率。
33 1
|
1月前
NPM——删除已发布的包
NPM——删除已发布的包
45 1
|
2月前
|
运维 Kubernetes Java
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
|
1月前
|
存储 安全 Java
阿里云云效产品使用合集之怎么设置使用npm私有仓库进行流水线拉取依赖
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
1月前
|
JavaScript 前端开发 开发者
从零到一:教你如何发布自己的npm插件包
从零到一:教你如何发布自己的npm插件包
|
1月前
|
JavaScript
GitHub——自动发布NPM包
GitHub——自动发布NPM包
12 0
|
2月前
|
JavaScript 测试技术
npm发布自己的插件包
npm发布自己的插件包