DEV Community

John Peters
John Peters

Posted on

NPM Link Internals

If we read the npm link documentation. We may not fully understand what it's saying.

npm link allows us to develop a library while using it's contents immediately in a consumer application. We are bypassing npm publish and npm install.

npm link

npm link is done in the library dist folder being developed as an npm package.

Alt Text

Afterward, the relationship is shown in the output window.

C:\Users\CurrentUser\AppData\Roaming\npm\node_modules\mslcc -> 
Enter fullscreen mode Exit fullscreen mode

Alt Text

If we then go to the consumer side and type in npm link linkname we see this..

PS D:\Source\Workspace> npm link mslcc

D:\Source\Workspace\node_modules\mslcc -> 
C:\Users\UserName\AppData\Roaming\npm\node_modules\mslcc -> 
Enter fullscreen mode Exit fullscreen mode

It linked the workspace node_modules\mslcc from the global cache of same name which originated from our library!

Import into local app.module.ts

Over on the consumer side...

Alt Text

We learned a new trick here, by simply using node_modules instead of the full path to that folder, we found that Typescript knew to progress upwards in the folders until it found the first node_modules folder! Cool didn't know that.


We bypass npm publish and npm install. We can change our library, save and compile. The consumer application picks up the changes instantly.

JWP 2020 NPM Link and it's use in Libraries

Top comments (0)