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.
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.
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.