'Modern' way of customizing Javascript libraries

Question

Javascript dinosaur here. Back in the good old days, customizing a JS library was pretty easy. I'd download the non-minified version, put that sucker on the /js folder, do the changes necessary to the code and embed it on the html. Like this:

  <script src="Sortable.js"></script>

Enter the marvelous world of modern javascript, a great advance where no project folders have less than 14mb. In this world, I don't download the file and put it on the /js folder, I install the package with 12 warnings and import it, and then a little program compiles it for me every time I need to test it. Takes 10x longer, but hey, my code is now compatible with the 0.0003% of users who use Internet Explorer 4. Wonderful. Anyway, this is the modern code:

import Sortable from 'sortablejs/modular/sortable.core.esm.js';

Sarcasm aside, I have a serious question: When customizing a library in a modern setup, of course, I won't change the final compiled version as it would be overwritten in a new build. I also wouldn't change the files sitting in node_modules folder, because these will be overwritten with every update. So what's the best way to do this?

Something tells me I have to fork the library, put the fork on npm and import the fork. I don't want to believe it. Is this really what I have to do to customize literally 2 lines of code?

I have a lot of sympathy with your sarcasm, being even longer in the tooth. However there are a LOT of advantages of the new pattern, but what you are wanting to do is one of the downsides. If you are fixing something then fork it, fix it, point npm at the git repo with the fix (no need to publish the fix yourself), make a pull request to the author. If and when the fix is accepted then re-point npm back to the original package. If it is not a fix, then it really depends on the nature of the package and the change. An example would really help. — Euan Smith
– Euan Smith, Commented Mar 15, 2020 at 15:22
For me I would choose a library with the most features I need, so later I don't have to do heavy customization. For small customization I can utilize the hooks. In case of SortableJS, say you want to do extra handling whenever an element is dropped into a list, you can set your own handler to the options object e.g. {onAdd: yourHandlerFunction} — Fahmi
– Fahmi, Commented Mar 15, 2020 at 15:26

artanik · Accepted Answer · 2020-03-15 15:23:46Z

3

If I had such a task, I would rather download the source code, do the changes, build it, and "install" it as a dependency using Local Path:

{
  "name": "project",
  "dependencies": {
    "sortablejs" : "file:../path/to/sortablejs/bin"
  }
}

But it's difficult to update the package with those changes. That's why you may consider using something like patch-package or using Yarn's yarn patch <package>, which lets you keep your changes separately from your package (in theory, I've never used it before).

answered Mar 15, 2020 at 15:23

artanik

2,71418 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

'Modern' way of customizing Javascript libraries

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related