What is the process for transferring npm package files to my local project?

Question

What is the process for transferring npm package files to my local project?

Despite my efforts to find the answer, I couldn't locate it and so here I am asking again.

What I'm looking for:

I need to move a file from node_modules to my project in order to work on it.

First attempt:

I moved the file I wanted to edit And adjusted the import path accordingly https://i.stack.imgur.com/mFiIE.png https://i.stack.imgur.com/Z3znx.png

Outcome:

Puzzling situation:

All modified paths seem correct I can access the imported file through the path in the IDE.

Sample repository:

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

Second attempt:

I transferred all imported files along with the one I want to modify into the project.

Outcome:

My thoughts: This issue might be related to Typescript or commonjs, but I'm unsure how to resolve it.

Sample repository: 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 has a solution to this problem, I would greatly appreciate your help.

javascript npm

Answer 1

Answer №1

Here are a few ways you can handle the situation:

Option 1: Take matters into your own hands and monkey-patch the module yourself:

Here's a general guide on how to do it:

Create a new file named ModifiedEditableText.tsx

Then in that file:

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

const newModule = {};

// Start by copying all fields from the original module
for (let fieldName in EditableText) {
    newModule[fieldName] = EditableText[fieldName];
}

// Write new implementations for any functions you want to change
newModule.function1 = function(arg, arg2, arg3) {
    // New function implementation
    // To call the original function, use:
    EditableText.function1();
}

export default newModule;

Option 2: Fork the module, make your changes, submit a PR, and hope for the best (though it may not get merged)

Option 3: Fork the module, implement your changes, and use that customized version in your code instead of the official library

Option 4: Utilize a library to monkey patch your component – here are some examples:

Answer 2

Here are a few ways you can handle the situation:

Option 1: Take matters into your own hands and monkey-patch the module yourself:

Here's a general guide on how to do it:

Create a new file named ModifiedEditableText.tsx

Then in that file:

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

const newModule = {};

// Start by copying all fields from the original module
for (let fieldName in EditableText) {
    newModule[fieldName] = EditableText[fieldName];
}

// Write new implementations for any functions you want to change
newModule.function1 = function(arg, arg2, arg3) {
    // New function implementation
    // To call the original function, use:
    EditableText.function1();
}

export default newModule;

Option 2: Fork the module, make your changes, submit a PR, and hope for the best (though it may not get merged)

Option 3: Fork the module, implement your changes, and use that customized version in your code instead of the official library

Option 4: Utilize a library to monkey patch your component – here are some examples:

What is the process for transferring npm package files to my local project?

Answer №1

Similar questions

Error encountered while retrieving data from Firebase and storing it in an array within an IONIC application

ng-repeat not functioning properly with FileReader

Implementing the onClick function for the correct functionality in a ReactJS map component

What is the reason behind the delayed mutation of the state when invoking the setState method in React?

Ways to halt streaming without shutting down the Node.js server

Looping through color transitions upon hover using CSS

Tips for creating an HTML page with the dimensions of an A4 paper sheet?

Top Method for Setting Up Node.js/npm without Using sudo

Struggling three.js newcomer faced with initial hurdle: "Function is undefined"

Sending an HTTP request from within an Express/Node.js application

Display an alert when no matches are found in autocomplete suggestions

Can you please explain to me the purpose of the ncu -u command?

Check the schedule for any upcoming events

Encountering a problem during the installation of node-inspector

The TypeScriptLab.ts file is generating an error message at line 23, character 28, where it is expecting a comma

What is the best way to determine the number of characters that will fit within the width of the document?

Any advice on resolving the issue of "Failed to parse source map from..." errors in my ReactJS/TS project?

Unable to process form submission using Ajax in ASP.NET MVC

"An error has occurred stating that the function Factory.function() in AngularJS

Retrieving the class name using jQuery