I don't know shite about:
Fork an npm package
For a github repo and use it as a dependency
I've been working on a prototype for a timboxing app and wanted to use a library called react-timer-hook. The library was missing the feature to display time only in minutes instead of hours and minutes, so I forked the repo and added the feature.
I didn't want to create a new npm package because I don't expect that anyone else would benefit from this code change. Therefore I created a fork of the react-timer-hook code on github. NPM allows you to install a package from a github repo with:
npm install <repo-url>
npm install https://github.com/DATADEER/react-timer-hook
But I soon realised that this is not enough. As you can see in the node_modules
folder of my app, the package is installed, but there is no sign of any code that i could import and use in my app.
Like most packages the package needs to be built before it can be used.
![dist folder is missing in folder structure](https://imgur.com/Rhvfsrf.jpg)
the actual code of the library is missing because it requires a build step
There are at least 2 ways to solve this problem:
(1.) Build the package and check the dist folder into the git repo 😳 This creates a lot of noise in your git commits and makes it harder to keep track of changes.
(2.) Build the package when installing it as a dependency ðŸ¤
This is the solution I chose. I added a prepare
script to the package.json
of my forked repo.
{
"name": "react-timer-hook",
"version": "3.0.5",
[...]
"scripts": {
"build:demo": "rm -rf ./docs && webpack --config webpack.dev.js && webpack-dev-server --open --config webpack.dev.js",
"build:prod": "rm -rf ./dist && webpack --config webpack.prod.js",
"prepare": "npm run build:prod",
"lint": "node_modules/.bin/eslint src"
},
The prepare
script is a built-in feature of npm, and it's executed when the package is installed as a dependency. It also runs if the package is installed from a git repo.
I chose to run the existing build:prod
script. It runs the build command of the dependency and creates the dist
folder.
![dist folder was created now](https://imgur.com/vrwHtAN.jpg)
now the dist folder is created
Now I can import the package and use it in my app as if it was a regular npm package.