How to use npm link with a module written using TypeScript for development?

Question

I am building a lib using TypeScript and Webpack.

To develop this library I have created a separate test project (written using JS) and linked the library using npm link <package-name>.

The problem is that the link leads to the build file and I need to run npm run build every time I make a change.

I want to have a link to the source file and have a live reload. Is it possible? Do I need to write my test project using TS also to make it possible?

Library package.json:

{
  ...
  "main": "lib/qr-code-styling.js",
  "files": [
    "lib"
  ],
  "scripts": {
    "build": "webpack --mode=production"
  },
  ...
}

Code of the library https://github.com/kozakdenys/qr-code-styling/tree/v1

Code of test project https://github.com/kozakdenys/qr-code-styling-site

P.S. I also tried "module": "src/index.ts" in package.json, but it causes an error in the test project Uncaught Error: Cannot find module './core/QRCodeStyling'

score 17 · Accepted Answer · edited Apr 08 '20 at 23:02

Yes, you need to write your test project in TypeScript as well. After that you need to map the package to the linked module source files in the test project tsconfig file.

In the compilerOptions entry of the tsconfig file add a baseUrl and a paths entry like the following the example:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "linked-module-name": ["node_modules/linked-module-name/src"],
      "linked-module-name/*": ["node_modules/linked-module-name/src/*"]
    }
  }
}

Read more about path mapping in the TypeScript docs.

score 11 · Answer 2 · answered Mar 12 '20 at 23:39

11

Another option is to have your TS project automatically rebuild using tsc --watch and then use the compiled code in your project via npm link ../path/to/dep

answered Mar 12 '20 at 23:39

Dana Woodman

4,148
1
38
35

score 1 · Answer 3 · answered Oct 19 '19 at 11:50

This can be set up on your tsconfig.json file, as it is a TS feature.

You can do like this:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

Have in mind that the path where you want to refer to, it takes your baseUrl as the base of the route you are pointing to and it's mandatory as described on the doc.

The character '@' is not mandatory.

After you set it up on that way, you can easily use it like this:

import { Yo } from '@config/index';

the only thing you might notice is that the intellisense does not work in the current latest version, so I would suggest to follow an index convention for importing/exporting files.

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

you can checkout here

https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea

How to use npm link with a module written using TypeScript for development?

3 Answers3