DEV Community

Cover image for Using local NPM packages as dependencies with yalc
Zach Snoek
Zach Snoek

Posted on • Edited on

Using local NPM packages as dependencies with yalc

Introduction

If you develop NPM packages, you may need to use a local version of a package as a dependency of another. For example, say you have two packages, package-a and package-b, where package-a depends on package-b. You've made changes to package-b and want to test them out in package-a without publishing package-b to NPM.

yalc solves this problem by allowing you to publish your local dependencies to a local store and make them available for use in dependent projects.

Immediately below are quick start instructions for easy reference. If you're interested in what yalc commands do under the hood, continue to How it works.

Quick start

Note: package-a is the local dependent package and package-b is the local dependency package.

1. Install yalc globally

$ npm i -g yalc
Enter fullscreen mode Exit fullscreen mode

2. Publish your dependency to the yalc store

[package-b] $ yalc publish
Enter fullscreen mode Exit fullscreen mode

3. Add the yalc-stored dependency to your dependent project

[package-a] $ yalc add package-b
Enter fullscreen mode Exit fullscreen mode

3a. Install the dependencies of the dependency if they aren't already installed

[package-a] $ npm i
Enter fullscreen mode Exit fullscreen mode

4. After making changes to your dependency, update the package in the store and push the changes to the dependent project

[package-b] $ yalc push
Enter fullscreen mode Exit fullscreen mode

5. Remove the dependency from the dependent project

[package-a] $ yalc remove package-b
Enter fullscreen mode Exit fullscreen mode

How it works

When using yalc to add a local package as a dependency, you first publish the dependency to the yalc store and add it to the dependent project. You can then update the dependency and eventually remove it from the dependent project.

Publishing

To add your dependency to the yalc store, run yalc publish. This will make a copy of the package in the store, which is located at ~/.yalc. yalc will also compute the hash signature of the package's files and store it in the store to verify that the correct version of the package is added to other projects.

Adding

yalc add <dependency> in your dependent project adds the package published in the store to your project. yalc will pull the package into the project and place it in .yalc, and will update the dependency entry in the project's package.json to point to the local copy.

For example, running yalc add package-b in package-a will create a copy of the dependency at package-a/.yalc/package-b. package-a's package.json will have a dependency entry for package-b that points to file:./yalc/package-b.

yalc add will also create a yalc.lock file in the dependent project that fixes the dependency to the version in the store using the signature created with yalc publish.

Note that yalc doesn't install dependencies of the local yalc package; run npm i after adding your dependency if it has any dependencies that are not installed.

Updating

If you've made changes to your dependency that need to be updated in the dependent project, run yalc push in the dependency project. This will publish the updated dependency to the store and update the changes in the dependent project.

Alternatively, you can run yalc publish in the dependency and then run yalc update in the dependent project.

You'll need to run npm i again in the dependent project if the dependencies of the dependency have changed.

Removing

Once you have no further use for the local dependency in your project, you can remove it with yalc remove <dependency>. This will remove the dependency stored in .yalc and the yalc information in yalc.lock and package.json.

Conclusion

yalc makes it easy to use locally-developed packages in other projects. It has some other useful options that I didn't mention here; read more about them on the project's README. Hopefully, this helps you get started developing with local packages––good luck!


Let's connect

If you enjoyed this post, connect with me on Twitter, LinkedIn, and GitHub! You can also subscribe to my mailing list and get the latest content and news from me.

References

Cover photo by Joshua Hoehne on Unsplash

Top comments (3)

Collapse
 
vladyn profile image
Vladimir Varbanov

That's a really good explanation I's say. Thank you!

Collapse
 
kibobishtrudelz profile image
Petar Kolev

Really nice article for which I thank! But I have issues with this approach in my Expo Bare Workflow project. The imports from my library are not resolvable, but the linking between my lib and app is successfull. Same thing happens with regular npm link as well :/

Collapse
 
scoutsout profile image
Cesar Perez

None of this language is confusing at all :-P