How to copy npm package files to my local project?

Question

It could be a duplicate question, but I could not find the answer I wanted, no matter how I tried to find it. So, I ask.

What I wanted:

Move the file in node_modules to my project, so that I can use it while editing the file

First try:

Moved the file I wanted to edit And only modify the import path for that file

result:

weird:

All modified paths are correct

ie I can move to that imported file through that path in the IDE.

Example repo:

https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal1 Especially: https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal1/src/components/editableText

Second try:

I moved all of the files imported as well as the file I want to modify, into the project.

result:

My opinion: It seems to be related to Typescript or commonjs. But I do not know how to make it work.

Example repo: https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal2 Especially: https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal2/src/components/list/editableText/components/editable-text

If anyone knows how to solve the problem, I would be very grateful.

Answer 1

Here are a few options for you:

Solution 1: You could manually monkey-patch the module in question:

Here is how to do it (general approach):

Create a new file named ModifiedEditableText.tsx

Then in that file:

import { EditableText } from "@blueprintjs/core";

const newModule = {};

// First, copy over all the fields from the original module
for (let fieldName in EditableText) {
    newModule[fieldName] = EditableText[fieldName];
}

// Then write new implementations of any function you want to change
newModule.function1 = function(arg, arg2, arg3) {
    // new function implementation
    // To call the original function do:
    EditableText.function1();
}

export default newModule;

Solution 2: Fork the module, do your change, submit a PR and hope that it is merged (probably not gonna happen)

Solution 3: Fork the module, do your change(s) and import that module in your code instead of the official library

Solution 4: Use a library to monkey patch your component, here are some examples of such libraries:

• https://github.com/ds300/patch-package
• https://github.com/lukehorvat/overwrite