The problem

Let’s say that we install @ckeditor/ckeditor5-build-classic npm package to our web app. This is a kind of package that has many forks. Some companies or individuals fork ckeditor5-build-classic repository and create their own versions of it, adjusted for use with their products.

The problem is that if you use such a product that has their own fork of @ckeditor/ckeditor5-build-classic, you might want to use this fork as npm package, not the original npm library. However, in most cases there’s no npm package published for the forked repository.

We need a way to replace the contents (source code) of the original npm library with contents (source code) from the forked library (custom version). Let’s see how to replace npm library with our own code.

The solution

The first idea that comes to mind could be to create a modified private npm package and use it in our project. However, it requires some maintenance and forking the original library. We found a better solution.

If we go to node_modules folder looking @ckeditor/ckeditor5-build-classic package’s source, we can see that its source files (bundles) are present in node_modules\@ckeditor\ckeditor5-build-classic\build\ folder:

If you check some forks of this library on GitHub, there are also bundles present there, e.g. here or here. Let’s say that we need to take the forked version of ckeditor.js file and replace this file in our original npm library. How do we do that?

patch-package

To achieve this, we need to install patch-package npm package. This is an awesome, life-saving tool created just for what we need. Kudos to our teammate Przemek who recommended this gold tool to me ?

After installing the package with npm i patch-package, we can simply go to our npm library’s source and modify it. In our case, we replace node_modules\@ckeditor\ckeditor5-build-classic\build\ckeditor.js file contents with the contents of ckeditor.js file from our forked library (for example with this one). After that, we save the file.

The last step is to generate a patch for our original npm library. We do it by executing the following command: npx patch-package @ckeditor/ckeditor5-build-classic (replace @ckeditor/ckeditor5-build-classic with your package name). This is how it looks:

We can now see that a new folder called patches was created in our web app’s directory. In our case, it contains only a single patch file:

What’s interesting, this file is basically a git diff between the original and modified ckeditor.js files:

When we now execute npx patch-package command, the changes we’ve made before are applied to the actual npm library’s files:

This is great, because we can now add this command patch-package to our build script, so our custom changes to the libraries are applied on every build. It’s very quick and works like a charm. That’s how we managed to easily replace npm library with our own implementation ?

We should check in the patch files to our GitHub repository, so our teammates have them locally and our build server can also apply the patches.

Since this moment, we modified the npm library’s code, so everyone who imports and uses this library in our app will be actually using our modified version of it.

If needed, we can easily revert the changes with npx patch-package –reverse. It restores the npm libraries to their original versions (thanks to the patch file stored as git diff).

Summary

I hope you found this article helpful. You can use the patch-package library not only to replace the npm library’s source files, but also as a quick-fix for bugs found in these libraries. No need to wait for the open-source community to fix the issue or the PR to be merged. You can make the patch quickly and at the same time report the issue on the concerned package’s GitHub. The tool even offers a feature to create a GH issue in the original repo with the diff containing your changes by using command npx patch-package package-name –create-issue.

For us at Yumasoft, the patch-package is a life-saver. Maybe it also saves you some headache? ?

The post How To Replace npm Library With Your Own Implementation? appeared first on Yumasoft.