How to have npm install a typescript dependency fr

Question

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?

Answer 1

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 [e-mail]: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

Answer 2

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.