Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

你所不知道的模块调试技巧 - npm link #17

Open
atian25 opened this issue Jan 24, 2017 · 34 comments

Comments

@atian25
Copy link
Owner

commented Jan 24, 2017

1. 背景

node 应用开发中,我们不可避免的需要使用或拆分为 npm 模块,经常遇到的一个问题是:

新开发或修改的 npm 模块,如何在项目中试验?

新同学一般会有以下几种方式:

为了方便示范,我们假设项目是 my-project, 需要用到一个独立的 my-utils 模块

1.1 发布一个 beta 版本

  • 优点:你高兴就好。
  • 缺点: 无趣+无趣+无趣,麻烦+麻烦+麻烦。

1.2 直接用相对路径安装

$ cd path/to/my-project
$ npm install path/to/my-utils
  • 优点:简单明了
  • 缺点: 调试过程中往往需要微调,此时需要切换到 my-utils 目录修改,然后反复重新 install,很麻烦

1.3 使用软链

$ cd path/to/my-project/node_modules
$ ln -s path/to/my-utils my-utils
  • 优点:软链后,两边修改直接同步
  • 缺点: 指令操作麻烦,不同操作系统语法不一样

2. 正解 - npm link

但其实 npm 本身已经对此类情况提供了专门的 npm link 指令。

相关文档: https://docs.npmjs.com/cli/link

下面我们简单介绍下用法:

$ cd path/to/my-project
$ npm link path/to/my-utils

简单的替换一个单词,就搞定了,cool~

如果这两种的目录不在一起,那还有一种方法:

$ # 先去到模块目录,把它 link 到全局
$ cd path/to/my-utils
$ npm link
$
$ # 再去项目目录通过包名来 link
$ cd path/to/my-project
$ npm link my-utils

该指令还可以用来调试 node cli 模块,譬如需要本地调试我们的 egg-init,可以这样:

$ cd path/to/egg-init
$ npm link
$ # 此时全局的 egg-init 指令就已经指向你的本地开发目录了
$ egg-init # 即可

想去掉 link 也很简单:

$ npm unlink my-utils

3. 写在最后

  • 该方法只是为了最后一步调试,模块本身的正确性,应该更多的通过单元测试来保证。
  • 单元测试相关内容,可以参见:单元测试

@atian25 atian25 added the Node.js label Jan 24, 2017

@atian25 atian25 changed the title 你所不知道的调试技巧 - npm link 你所不知道的模块调试技巧 - npm link Jan 24, 2017

@rccoder

This comment has been minimized.

Copy link

commented Feb 9, 2017

👍,当年修改 node_modules 后发布了一次导致 node_modules 里面的代码直接没了给我留下了 深刻 的记忆 😂

@XadillaX

This comment has been minimized.

Copy link

commented Feb 28, 2017

问题是一个项目里面被 flatten 出来几千个目录,你就算开个软连,编辑器里面展开 node_modules 目录也会被卡死。

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Feb 28, 2017

@XadillaX 这个跟 link 关系不大,是 npm@2,npm@3,cnpm 的包安装方式区别导致的吧。

这是编辑器的问题,很容易解决的,vscode 和 webstorm 配置几个 ignore 就 ok 了。(局部 ignore,不用全部屏蔽整个 node_modules)

@XadillaX

This comment has been minimized.

Copy link

commented Feb 28, 2017

@atian25 为什么大家都喜欢把 NPM 自身机制问题总要归结到编辑器问题上去呢 -。 -

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Feb 28, 2017

@monkindey

This comment has been minimized.

Copy link

commented Jul 13, 2017

呀, 感觉如果是用yarn install的话用yarn link会好一点的呢。具体原因不太清楚, 在yarn下载然后用npm(npm5) link感觉npm会去处理环境生成一个lock文件, 处理起来有点慢的呢, 用yarn就一秒左右就搞定了。不过确实link的方式在开发的时候确实是不错的思路。感谢分享。

@lightWey

This comment has been minimized.

Copy link

commented Aug 16, 2017

那,如果我的js插件直接放到项目目录下呢

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Aug 16, 2017

@lightWey 然后你的问题是?

@ahonn

This comment has been minimized.

Copy link

commented Aug 16, 2017

🤔 我居然每次都 npm install path/to/my-project --save 一次,没有想到用 link...

@sunlandong

This comment has been minimized.

Copy link

commented Nov 27, 2017

有一个模块,开始是直接通过npm install gitlab地址,运行项目没错,但是在本地,我通过npm link之后,运行就出错了,

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Nov 27, 2017

@sunlandong 这种反馈对交流是没有任何帮助的,出什么错?错误信息是啥?复现步骤是啥?挤牙膏似的交流是最没效率的。

@renyuanz

This comment has been minimized.

Copy link

commented Dec 11, 2017

你好,我目前也是需要把一些基础的vue组件分离出去单独做一个npm的包,试了npm link这个办法,理论上是没有问题的,可以达到想要的目的。但是我遇到的问题可能和vuejs/babel更相关一些,由于vue组件在分离前,有webpack配置好了babel去解析,但是在分离出去之后,似乎要给新的npm模块单独做一个构建的流程?我现在只是单纯的把一些vue文件抽离了,放到另一个git仓库了,然后用一个入口文件import/export 所有的组件,然后问题是启动webpack server的时候会无限卡在等待打包的过程。我感觉就是缺了对分离出去的npm模块的解析过程。

请问有没有类似vue/react组件本地开发流程的经验分享?谢谢啦

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Dec 11, 2017

应该没区别的,npm link 只是对目录做了一个软链而已,文件系统层面的,工具层面的应该是无感知的,除非工具那边不支持跟随软链(应该不会)。

npm link 只是在需要本地测试的时候用到的。

@AsceticBoy

This comment has been minimized.

Copy link

commented Feb 7, 2018

是否每次install的时候都需要设置下软链,软链会不会被记录在lock.json文件中,如果能记录是不是说明能够解决特定的npm package放到自己的项目中维护

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Feb 7, 2018

link 只是用于调试用的。

@AsceticBoy

This comment has been minimized.

Copy link

commented Feb 7, 2018

好吧,我本来以为能解决自己维护 package 的问题

@qwIvan

This comment has been minimized.

Copy link

commented Apr 7, 2018

既然提到了ln,那还是直接ln -s吧?跟ln有什么区别?

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Apr 8, 2018

@qwIvan

  1. npm link 后,该项目会被 link 到全局去,你就能测试命令行了
  2. 在上面那句后,可以直接 npm link pkgName 来在应用中 link,不需要 ln 复杂的相对路径。
  3. ln 不同操作系统的语法不同
@llsldwy

This comment has been minimized.

Copy link

commented Apr 17, 2018

大神你好,我这里遇到一个问题,npm install 之后,在node_modules/.bin/ 里面没有创建软连接,都是硬链。(node V8.4.0 npm V5.3.0)这个情况是在 生成环境打包时候发现的,本地和测试环境都没问题,我还尝试过,把生成打的包下载之后,删除node_modules 和 package-lock.json文件,然后本地npm install,这样生成.bin文件夹里会自动创建软链。所以 请问一下大神,有没有碰到过这样的情况,npm 在什么情况下不会自动创建软链的?

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Apr 17, 2018

没遇过。

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Jun 26, 2018

@llsldwy 你那个问题很大可能是你打包的问题, tar 或 zip 的时候多了一个参数

@sunha1yang

This comment has been minimized.

Copy link

commented Jun 27, 2018

你好 ,有个问题,我在npmlink后,不能彼此共享node_modules,执行脚本的时候找不到安装依赖

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Jun 27, 2018

@sunha1yang 啥叫共享 node_modules?

@sunha1yang

This comment has been minimized.

Copy link

commented Jun 27, 2018

sorry, 我表述上有点问题,我要测试pkg有一些依赖,如webpack等第三方包,我在另一个文件夹(此文件夹下有node_modules文件,pkgName需要的依赖包都存在)下npm link pkgName后,我的pkg引不到此文件下node_modules文件,然后就会报错,我的问题是如何能让我的pkg能够引到当前文件夹下的node_modules文件?

不知道我有没有表述清楚......

@atian25

This comment was marked as outdated.

Copy link
Owner Author

commented Jun 27, 2018

还是没懂,搞个 tree 图呗

@sunha1yang

This comment was marked as resolved.

Copy link

commented Jun 27, 2018

question

这个是我的操作步骤

@atian25

This comment was marked as outdated.

Copy link
Owner Author

commented Jun 27, 2018

我指的是这样描述下。。。

.
├── app
├── config
├── node_modules
│   └── aaa -> link to ./app/xx/xx
└── package.json
@sunha1yang

This comment has been minimized.

Copy link

commented Jun 27, 2018

目录结构是这样的:

.
├── fe
├── awt ->npm link
├── project -> 在项目目录下 npm link awt
│   ├── app
│   ├── node_modules
│   └── package.json
|   └── config
└── otherproject
    └── home.html
@azl397985856

This comment has been minimized.

Copy link

commented Jun 29, 2018

很有用,基本你上面提到的第一种方法,以及后面的都用过 哈哈

@qwIvan

This comment has been minimized.

Copy link

commented Sep 15, 2018

问一下,typescript的项目,怎么解决这个问题

@atian25

This comment has been minimized.

Copy link
Owner Author

commented Sep 16, 2018

没啥区别吧

@uhr uhr referenced this issue Oct 9, 2018
@qq912276337

This comment has been minimized.

Copy link

commented Oct 9, 2018

楼主你好。我现在遇到一个问题
我现在有一个模块lib文件夹(lib中package.json库名称是"@sml/lib")跟project项目文件夹
我切换到lib下执行npm link 然后再切换到project文件夹下执行 npm link @sml/lib
在项目中引入lib后刷新就报错了。
Unable to resolve module @sml/lib from /Users/sml2/Documents/iOSDemos/RNBaseProject/App.js: Module @sml/lib does not exist in the Haste module map
这是为什么呢

@zhbhun

This comment has been minimized.

Copy link

commented Dec 19, 2018

@sunha1yang npm link 会遇到依赖找不到的问题,不是好用(没有问题的话还是尽量使用 npm link)

https://medium.com/@vcarl/problems-with-npm-link-and-an-alternative-4dbdd3e66811

@brizer

This comment has been minimized.

Copy link

commented Apr 24, 2019

依赖找不到的问题,可以用https://nodejs.org/api/cli.html#cli_preserve_symlinks 这个解决的,朋友们

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.