Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have npm install a typescript dependency from a GitHub url?

Consider the following scenario:

  • There is a code library. The library is written in TypeScript and the typescript code is published in GitHub. The package.json file has a build script which creates JavaScript files based on the TypeScript code and a publish script which then places the resulting JS files on npm.
  • I make a fork of the GitHub repo, make some modifications to the typescript files and push those changes to GitHub. (I also open a PR to the original GitHub repo but there is a time lage before these changes can be merged.)
  • I wish to consume these code changes in a downstream NPM package so in the downstream packages I change the reference (in the downstream's package.json file) to the modified package to the GitHub URL of my fork and do an npm install.

This doesn't work because:

  • The package.json file of the modified package does not list the typescript files in the dist field, only the automatically generated JS files so the TypeScript files are not pulled during the npm install.
  • The compiled JS files aren't present since they aren't checked in to GitHub.

How can I solve this? Is there a way that I can modify the behavoir of npm install so that it fetches files in the repo that aren't in dist and then runs the build script during the install?

like image 344
Jacob Horbulyk Avatar asked Jun 28 '18 09:06

Jacob Horbulyk


People also ask

How do I add an npm link to GitHub?

Add the GitHub repository URL there: "repository": { "type": "git", "url": "https://github.com/your-user/repo-url.git" }, Make sure you specify git as type and that the URL is pointing to the actual repository, not an HTML page. So the URL has to end with .

How do you install TypeScript globally type npm install TypeScript?

You can use npm to install TypeScript globally, this means that you can use the tsc command anywhere in your terminal. To do this, run npm install -g typescript . This will install the latest version (currently 4.7). An alternative is to use npx when you have to run tsc for one-off occasions.

How do I automatically install npm dependencies?

to install the dependencies automatically , first of all list them manually in package. json file and run the npm install (sometimes sudo npm install ) command.

How to initialize typescript using NPM?

Before initialize the typescript project we need to install Typescript using NPM The command will install TypeScript globally on your system. You have to run this command only once. ❗❗❗You can also install it for a specific project by following command ⚠️⚠️This command must be ran in the root folder.

How do I install GitHub packages on npm?

Install Packages From Github. The npm command can install public packages from npmjs registry using the install command: 1 2 3 npm install package-name package-name2 # or npm i package-name package-name2. bash. Sometimes packages are not published on the npmjs registry, but it can still be installed using npm.

How to install a package from a different GitHub repository?

The npm command will try to install the package using git clone. The npm command can also install the package from different GitHub repository states using a commit hash value, which can be used to install the package with a commit id:

What is a development dependency in NPM?

Development dependencies are intended as development-only packages, that are unneeded in production. For example testing packages, webpack or Babel. When you go in production, if you type npm install and the folder contains a package.json file, they are installed, as npm assumes this is a development deploy.


2 Answers

I had the same problem. Saw a lot of articles about monorepos (links below), but not much about how to split a TypeScript project into separate repositories.

In short, you need to build JS files at one step or the other.

See https://github.com/stared/yarn-adding-pure-typescript-package-example for a working code example.

So, there are a few solutions. Let's say that the repository is someuser/package-to-import

Postinstall

Using yarn you can get the project directly from a GitHub repository:

yarn add someuser/package-to-import#master 

(or the same with npm install someuser/package-to-import#master)

If you work on a fork of this repository, you can make your life easier by adding to package.json in package-to-import repo this part:

  "scripts": {     ...,     "postinstall": "tsc --outDir ./build"   } 

Now it just works with yarn add/upgrade with no extra scripts. Alternatively, you can do it semi-manually, i.e. create a script in your main repository package.json

  "scripts": {     ...,     "upgrade-package-to-import": "yarn upgrade package-to-import && cd node_modules/package-to-import && yarn build"   } 

Link

There is a different approach to clone the repository into a different folder, build the files, and link it.

git clone [email protected]:someuser/package-to-import.git cd package-to-import npm run build  # or any other instruction to build npm link 

If you use yarn, the two last lines would be:

yarn build yarn link 

Then, enter the folder of your project and write

npm link package-to-import 

or in case of yarn

yarn link package-to-import 

These are symlinks, so when you pull from the repo and build files, you will use the updated version.

See also:

  • npm link andyarn link official documentations
  • The magic behind npm link

Monorepos

An entirely different approach. With mixed advice for using git submodules:

  • 4 Ways to Go Monorepo in 2019
  • 4 Git Submodules Alternatives You Should Know
  • A (multi-) monorepo setup with Git Submodules
like image 169
Piotr Migdal Avatar answered Oct 04 '22 18:10

Piotr Migdal


The docs for the prepack script suggest that it is run after a dependency is installed from a git repo. Try putting something like this in the package.json of the git dependency:

{   "scripts": {     "prepack": "call the build script"   } } 

This should build the package after you npm install it, which sounds like what you want to do. I'm not sure if there are any other problems you are having beyond that.

like image 41
Half Avatar answered Oct 04 '22 18:10

Half