Modify d3 scripts in node_modules folder to test feasibility of symLog axes

Question

I'm looking to modify an npm package locally to test if a particular edit gives me the desired functionality. (Specifically I'm trying to implement a symLog axis for my d3 visualization.) There is one main d3 package which has an index.js file that exports from a bunch of smaller packages:

export * from "d3-array";
export * from "d3-axis";
export * from "d3-brush";
...

That repo has 2 other files in the dist/ folder: d3.js and d3.min.js.

The package that I'm interested in is d3-scale. It has 2 files in the dist folder: d3-scale.js and d3-scale.min.js. It also has about 20 js files in the src folder. One of the files (log.js) I wish to edit a few lines.

When I edit those few lines in that file and I restart the application I open up the dev tools in chrome, go to sources, then to the node_modules/d3-scale/src/log.js. My changes are not reflected.

What am I missing? I am importing the d3 package which uses the d3-scale package. I would expect that the files loaded would be the ones I edited from the node_modules folder. How does the browser load these files? Is it using the .min.js files and then using sourcemaps? How can I edit this d3 or d3-scale packages so that my changes are loaded by the browser?

(also I realize editing node_module scripts isn't the best way to make a change. I'm just trying to quickly see if a few line edits will provide the functionality I need)

This may be interesting: https://stackoverflow.com/q/13300137/5768908 — Gerardo Furtado, Mar 01 '23 at 02:14
I saw that. I tried copying the folder of the composing package I wanted to edit out to a parent directory and doing an npm link with it, but it still used the old package — afriedman111, Mar 01 '23 at 14:30

score 0 · Answer 1 · answered Mar 03 '23 at 15:11

I found the problem. I am building an Angular 13 app. Angular was caching scripts so that when I edited the node_modules folder, the changes weren't reflected. When I turned caching off in the angular.json, the changes in the node_modules package script were reflected in the browser.

Modify d3 scripts in node_modules folder to test feasibility of symLog axes

1 Answers1