Utilizing npm link with a TypeScript-written module: a guide for seamless development?

I am currently in the process of developing a TypeScript and Webpack-based library.

To facilitate the development of this library, I have set up a separate test project (written in JS) and connected the library using npm link <package-name>.

However, I am facing an issue where the linked file directs to the build version, requiring me to execute npm run build each time I make changes.

Is there a way for me to establish a link to the source file with live reloading capabilities? Would rewriting my test project in TS be necessary to achieve this?

The library's package.json:

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

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

Check out the code of the test project at https://github.com/kozakdenys/qr-code-styling-site

P.S. I attempted using "module": "src/index.ts" in package.json, but it resulted in an error in the test project stating: 

Uncaught Error: Cannot find module './core/QRCodeStyling'

typescriptnpmwebpackpackage.jsonnpm-link

Answer №1

A necessary step is to develop your test project in TypeScript and ensure it aligns with the linked module source files. This involves configuring the tsconfig file accordingly.

Within the compilerOptions section of the tsconfig file, insert a baseUrl and specify the paths as shown below:

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

To gain more insights on path mapping, refer to the TypeScript documentation.

Answer №2

If you prefer, you can set up your TS project to automatically rebuild using the tsc --watch command and then incorporate the compiled code into your project using npm link ../path/to/dep

Answer №3

To implement this feature in your project, you need to modify the tsconfig.json file specifically designed for TypeScript.

Here is an example of how you can do it:

"compilerOptions": {
        "baseUrl": "src", // Specify if using "paths"
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

Keep in mind that the path you provide will start from the baseUrl, and it's a requirement according to the documentation.

The symbol '@' is optional in the path naming.

Once configured as shown above, you can easily utilize it like so:

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

Please note that the intellisense may not function correctly in the latest version. It is recommended to follow an index convention for importing/exporting files.

Learn more about path mapping here.

You can also refer to the implementation details at this link:

View the commit details here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on installing packages through npm while behind a proxy

When I try to run the npm install command, I keep getting the following error: ERR 418 I m a teapot I've configured a proxy but I'm not sure if it's being parsed correctly. I suspect the proxy might be causing the issue. Can anyone assis ...

npmnpm-install

Determine whether the radio button has been selected

Within my HTML code, there's a radio button enclosed in a form: <mat-radio-button [(ngModel)]="boxChecked" name="boxChecked" value="boxChecked">Check me</mat-radio-button> In the TypeScript section, I've declared my boolean variable ...

angulartypescript

Utilizing Typescript for manipulation of Javascript objects

Currently, I am working on a project using Node.js. Within one of my JavaScript files, I have the following object: function Person { this.name = 'Peter', this.lastname = 'Cesar', this.age = 23 } I am trying to create an instanc ...

angularjsnode.jstypescript

Nuxt encountering a critical issue: "module 'dir-glob' not found"

Recently, while running my Nuxt app, I encountered an error after restarting the server using npm run dev. The error message stated that it couldn't find the module 'dir-glob'. Despite finding a similar issue on Stack Overflow related to Ang ...

node.jsvue.jsnpmnuxt.js

Issue with installing npm in Docker container

My attempt to construct an ASP.Net 5.0 web app using Docker is encountering a failure during the npm install step, displaying the following warnings: Step 14 : RUN npm install ---> Running in 15c191d1ca1d npm WARN deprecated <a href="/cdn-cgi/l/ema ...

node.jsdockernpmnpm-install

Unable to retrieve object from request using npm express on the backend

After following a tutorial on creating an app with frontend/backend in Angular, I encountered difficulties in communicating with JSON via rest calls to the backend. Although both sides are working properly and methods can be called from the backend, I am f ...

restnpmangular-cli

What is the best way to adjust and filter an array based on a single value?

Here is an array that needs to be modified: [ {name: "test", value: "test", group: 0}, {name: "test1", value: "test2", group: 0}, {name: "test3", value: "test3", group: 1}, {name: "te ...

javascripttypescript

Hiding the style tag in the head section of a Laravel-Vue.js application with Vue.js

Currently, I am working on a Laravel-Vue.js application. I have noticed that when Vue.js renders CSS, it appends some style tags in the HTML head as shown in the image below. Is there a way to hide these tags? My initial thought is that it can be achieved ...

javascriptlaravelvue.jswebpackvuejs2

Password validations are a key feature of reactive forms

Currently, the sign-up button only becomes enabled if the signup form is valid. However, I am facing an issue where the button is getting enabled even when the password and confirm password fields do not match. I suspect there might be a problem with my i ...

angulartypescript

Encountering an Issue with NPM Run Production in PostCSS

I keep encountering the same error whenever I attempt to execute 'npm run production'. The remainder of the error consists of a compilation of 'node_modules' packages where this issue is also present. ERROR in ./resources/assets/sass/ap ...

node.jslaravelvue.jsnpmpostcss

Turn off Npm alerts treated as issues: creating build setup in TFS

While building using the build definition, I keep getting npm warnings treated as errors. To address this issue, I included the following property in MSBuild Arguments within the Build Definition: /p:TreatWarningsAsErrors=False Despite this change, the ...

tfsnpmbuild-definition

When running "composer install," the Laravel/UI dependency is not automatically installed

I'm seeking insights on nodejs and npm dependencies because I am not very familiar with them. Our CI system builds docker images using a multi-stage build process: first, a node image is used for running "npm install", followed by a composer image in ...

node.jslaravelnpmcomposer-php

Personalized pagination - React data table

I'm looking to create a unique pagination design using react-table that fits my specific requirements: Currently, the default pagination I'm using looks like this: But I want it to resemble this: Here's the code I have so far: import Reac ...

reactjstypescriptreact-table

Exploring the differences between Typescript decorators and class inheritance

I find myself puzzled by the concept of typescript decorators and their purpose. It is said that they 'decorate' a class by attaching metadata to it. However, I am struggling to understand how this metadata is linked to an instance of the class. ...

typescriptangulardecorator

How can I pass DOCUMENT in Angular?

In my directive, I use dependency injection to access the DOCUMENT and set up an event listener: constructor(@Inject(DOCUMENT) private document: Document) {} ngOnInit() { this.document.addEventListener('click', this.clicked, true); } @Bound ...

angulartypescriptjasminekarma-jasmine

How to implement a toggle button in an Angular 2 application with TypeScript

Currently, I'm working with angular2 in conjunction with typescript. Does anyone know how to generate a toggle button using on - off?. ...

typescriptangular

Angular TextInput Components don't seem to function properly when dealing with arrays

I am trying to create a collection of text input components with values stored in an array. However, when using the following code, the values seem to be placed incorrectly in the array and I cannot identify the bug. <table> <tr *ngFor="let opt ...

angulartypescript

Retrieve the specific type of property from a generic data structure

I am currently working on a project where I need to determine the type of property within a given Type: type FooBarType { foo: string, bar: number } The function would be structured like this: getType<K extends keyof T>(key: K): string. The ...

typescripttypescript-generics

Is it possible to enhance the GamepadAPI's functionality?

I've been working on enhancing the built-in GamepadAPI by adding custom controller code. With TypeScript, I created a basic function to trigger a "gamepadconnected" event. // emulate gamepadconnected event function dispatchGamepadConnectedEv ...

htmltypescriptgamepad-api

The node concludes with an error and an exit status of 3221225786

Hey there! In my package.json file, under scripts, I have a line that reads "serve": "node index -test". When I directly run node index -test in the Node command prompt, no error occurs. However, when I run npm run serve to do the same thing, an error pop ...

node.jsnpm