DEV Community

JWP
JWP

Posted on

2 1

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 -> 
    D:\OtherFolder\Web\UI\CommonComponents\dist\msl
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 -> 
D:\Source\Main\Web\UI\CommonComponents\dist\msl
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.

Advantages

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)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay