【前端工程化】缔造包之缘:揭秘 yarn/npm link

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第1张图片

初探 yarn/npm link

在开发过程中,我们经常会遇到需要在不同项目中共享自定义包的情况。为了解决这个问题,我们可以使用 yarn linknpm link 命令来在项目中创建软链接,使得一个包可以被其他项目直接引用。下面我们来探讨一下这个过程,并看看其中的一些使用场景。

创建示例目录和包

创建两个目录:被link的目录link_module和link它的目录project

然后以此cd到各自的目录执行npm init -y

cd link_test
npm init -y
cd ..
cd project
npm init -y

这样两个目录都变成了两个包(前端中包的定义:含有package.json的文件夹)

添加测试代码

添加一下测试代码:

// link_module/index.js
function print_link() {
  console.log('link_module');
}

module.exports = print_link;

// project/index.js
const print_link = require('link_module')
print_link()

此时目录为

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第2张图片

使用 yarn link 连接包

为了在 project 中使用 link_module 包,我们有几种策略可以选择:

  1. 通过路径,直接引入 缺点:如果 link_module 不在当前目录,还得去找
  2. link_moudule发包,再npm install 缺点:更新太麻烦,如果只是自己用没必要发包
  3. link_module通过yarn link到全局,然后在project目录里yarn link link_module

主要研究第三种:

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第3张图片

可以看到 执行yarn link后多出来一个node_modules目录而且是通过软链接链接到link_moudle

这时候我们去运行一下project/index.js

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第4张图片

成功!!

理解 yarn link 的过程

当我们在 link_module 目录中运行 yarn link 后,会在全局目录下创建一个软链接,将 link_module 链接到全局包目录中。然后在 project 目录中运行 yarn link link_module,会在 project 目录下创建一个软链接,将 link_module 链接到 project/node_modules 下。

这样,当在 project 中引用 link_module 时,实际上是在访问全局链接,而不是复制包的内容到 project 中。

这只是yarn link的一个使用场景,下面才是最最重要的。


解决第三方包调试问题

当我们项目中引入开源包,比如rollup时,我们端点调试只会进入rollup打包之后的dist的文件,如下图

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第5张图片

这样对我们调试是不太友好的,这时候我们会想到要是有相对应的source-map文件就好啦

那我们可以把rollup下载到本地,然后自己build生产 source-map 文件,然后通过 yarn link 一下,这样不就解决了

实战:

  1. 运行npm run watch

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第6张图片

  1. 运行yarn link

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第7张图片

  1. 项目中替换掉rollup

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第8张图片

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第9张图片

tips:

  1. windows如何查看yarn link全局注册到哪里?
$ yarn global dir

C:\Users\XXX\AppData\Local\Yarn\Data\global

返回Data目录就找到啦

返回yarn\Data目录里的link目录

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第10张图片

  1. 如何查看一个项目中link了哪些包?

node_modules里软链接的包就是我们link的包

【前端工程化】缔造包之缘:揭秘 yarn/npm link_第11张图片

思考

  1. npm link 的原理是什么

通过软链接的方式全局注册当前包,然后npm link xxx使用当前包后也是通过软链接的方法

  1. 如何更好地去调试某些经编译的 package

将package克隆到本地,然后link本地package,替换掉node_modules里的

这就是关于使用 yarn link 进行包链接和它的应用场景的一些内容。如果你有更多问题或需要进一步帮助,随时提问!

你可能感兴趣的:(前端,npm,node.js)