loading...

NPM Link Internals

jwp profile image John Peters ・1 min read

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

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

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

Posted on Jun 29 by:

jwp profile

John Peters

@jwp

Angular, React, Typescript and JavaScript. The wave of now!

Discussion

markdown guide