1

This feels like a question a person shouldn't have to ask, but I've been searching for the past 3 hours how to do this and I can't figure it out.

Here is what I'm trying to do:

1) fork a library from a GitHub repo, let's call it vue-widget

2) I need to get the files on my local machine somehow, most documentation says to do git clone https://www.github.com/username/vue-widget.git

My problems immediately begin around here because I don't know how to load the library into my project. I am trying to do:

import Widget from '@username/vue-widget';

The part that is making me quite frustrated is that all the help documentation I can find is written as if I am doing a 1 character change and then submitting a pull request, but I am doing a potentially extensive modification, so I need to run the modified feature branch in my application. I can't find how to do that.

I found some documentation from NPM that indicates I might be able to use scoped packages, but I can't figure out if that's required. Do I really need to fork a project and then publish it under my own name on NPM? or is there a faster, easier way?

I also understand I may be able to include a hash in the import, like:

import Widget from '@username/vue-widget#ose847vg6seo5489ve4e45n';

I am super lost about how to import Widget from a feature branch in my forked repo. I want to know what the most common and idiomatic way of doing this is.

My expectation is that there is a way I can clone my forked repo, create a feature branch, load that into my application, modify it, and then submit a pull request when it is ready.

[edit]: My problem was that the library I was forking had the /dist folder in the .gitignore file, so my installation was not able to initialize properly due to those files not being built.

The solution is to remove /dist from the .gitignore file, then run:

npm run build
git add .
git commit -m "removed /dist from gitignore"
git push origin featureA

Then after that, back in the project you are trying to get the forked library into, do the solution that Max showed. In my case, I added this to my package.json file and then ran npm install:

"vue-widget": "username/vue-widget#featureA"

Here are some useful links that took me a while to uncover:

How to install a private NPM module without my own registry?

npm install private github repositories by dependency in package.json

https://docs.npmjs.com/files/package.json#git-urls-as-dependencies

This is the one that actually solved it for me:

npm install and build of forked github repo

Be sure to read the comments below as there are a couple nice URLs about npm link that can be situationally useful.

Improve this question
7
  • Do you want to use the package's branch in your project in production or do you just want to work with the branch locally? Commented Sep 4, 2018 at 19:21
  • not in production, but I imagine that would require a public NPM scoped solution. I want to know where I should clone the repo to, and then how to import it in so that it imports my feature branch. Commented Sep 4, 2018 at 19:22
  • 1
    So you can install branches of packages. It is explained in the link at the end here. Or I can explain what npm link is. Look and let me know: stackoverflow.com/questions/39732397/… Commented Sep 4, 2018 at 19:24
  • 1
    docs.npmjs.com/cli/link Commented Sep 4, 2018 at 19:25
  • Thanks, that is a helpful set of links. I tried that earlier and it throws Module not found: Error: Can't resolve 'vue-widget' after I do npm run watch to run the project. It added this to the package.json: "vue-widget": "github:username/vue-widget#featureA". Commented Sep 4, 2018 at 19:35

1 Answer 1

Reset to default
2

If you can install from a forked repo, you can do that following below

npm install --save git+https://[email protected]/[username]/[package name].git

If you need to link a module locally you can do the following. Use npm link. The docs are here.

  1. Go into the project you are working on locally and npm i --save the module you want to use from the npm registry.
  2. Now, locally, clone the forked repo you want. Don't forget to npm i that module's dependencies.
  3. In that forked directory run npm link. This should take those forked files and link them to the local reference. Any time you have a change or switch branches in this local module you want to see in another local project, you have to run npm link.
  4. Now go to the project you are working on locally and run npm link [module you forked and cloned locally]
  5. Restart your project and you should see the changes.

npm link can be a little finicky, but when you run step 4, you should see the file path to your locally link files.

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

9 Comments

With that and after doing link, it shows Module not found: Error: Can't resolve 'vue-widget'. It seems to have a hard time when the dependency name is the same as the regular package from the maintainers. It didn't put anything in my node_modules folder after running that npm install.
@agm1984 You don't have to do link since you are sourcing the modules from github. You might be messing up with namespace by linking
I just typed npm link trying to get a list of links, naive attempt, and what it actually did was add vue-widget into my node_modules folder, but same error output.
I don't understand how it could be so brutally difficult to load a forked version. There must be something fandamental I am missing. Is this wrong? import Widget from 'vue-widget';Is there any way I can just tell it to forget NPM and do like import Widget from '../vue-widget'. That way the project wouldn't have to care what branch it's loading. It would just load whatever branch is currently selected.
@agm1984. You have to be able to install the module into your project because when your project is running and you call import or require your app is going to look into your node modules for that module. Locally, you can npm link to tell your app to look at local files rather than what is in your node modules, but you still need that reference in your package json
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.