JS/TS Strategies for Sharing Code Across Multiple Projects

Perhaps there is a different approach that has not crossed my mind.

I have spent some time exploring various methods like js/ts with npm link, git submodules, tsconfig paths, symlink, npm/pnpm/yarn workspace, npm pack & npm link, package.json exports, package.json commonjs/module, and nx(nrwl)/lerna. Each method comes with its drawbacks, and it seems there are no straightforward standards to follow.

Issue:
As a developer,
I want to write code and reuse it.
I want to initiate a new project and utilize only the necessary code.
I have existing code that needs to be shared across multiple projects while allowing for updates.
I am seeking clear instructions on how to achieve this.
My IDE of choice is JetBrains IntelliJ IDEA.

I aim to avoid complicating the codebase with package management, configurations, commands, or other techniques that hinder development speed and create unnecessary steps.
A monorepo is not feasible due to the large number of projects, and the IDE's performance suffers when handling tasks like searching and replacing within a monorepo setup.

The structure of the code is as follows:

/unit_domain_project_1
. .git
. package.json
. /src
. . /units # library
. . . /meter.ts # module 
. . . /meter.test.ts # unit testing
. . /nodejs
. . . # Node.js code in TypeScript not compilable in browser
. . /browser
. . . # Browser code in TypeScript not compilable in Node.js

/furniture_project_2
. .git
. package.json
. /src
. . table.ts # here I aim to reuse only 'units'

/building_project_3 # additional nesting example 
. /src
. . house.ts # here I aim to reuse 'table' along with 'units/meter'

Solution:
The most effective solution I have discovered is using symlink such as

ln -s $ABSOLUTE_PATH_TO_PROJECT_1/units
, although this approach requires additional shell scripting for Docker environments.

Query:
How can I effectively reuse the 'units' code? (Kindly provide step-by-step guidance.)

Drawbacks of Existing Approaches: (The following approaches present interrelated issues)

  • git submodules - Demands manual git pull/push in each project.
  • symlink - Necessitates shell scripting like
    copy ./linked_code_source ./linked_code
    when working with Docker.
  • tsconfig paths - Lacks support for relative paths beyond the parent(base), leading to IDE dependency resolution issues.
  • package.json exports: {'*./'} - Leads to complexity with package.json commonjs/module; TypeScript must be transpiled into module JavaScript, causing challenges with dependencies and path resolution, requiring significant effort to make it function correctly.
  • npm link - Does not integrate well with Docker, necessitating additional shell scripting.
  • npm/pnpm/yarn workspace - Relies heavily on specific versions of npm/node, either creating symlinks or copying files without updating them, mandating post-install scripting and package rebuilds.
  • npm pack & npm link - Requires an update script to manage changes.
  • nx(nrwl)/lerna - Emphasizes adherence to their folder structure and build commands, thereby mandating code segmentation into libraries, along with configuration setups and package.jsons, introducing unnecessary complexities.

Answer №1

Dealing with npm link can be a real headache!

If I were you, I'd switch to a Monorepo structure and leverage tools like turborepo (lerna and nx are also worth considering). It might take some initial effort, but the ease of use compared to other methods is well worth it.

Publishing a shared library on npm or yarn is another option, but keep in mind that there are costs associated with making it private. Managing different versions can also become quite cumbersome.

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

I am looking to create a counter in NextJS that will store its value in a database for persistent storage. How can

In my NextJS and ReactJS project, I am creating a like-counter feature that will keep track of the number of likes a user can give. The maximum limit for likes is set to 100. The count is stored in a FaunaDB. While I have successfully displayed the curren ...

Troubleshooting problem with TypeScript observables in Angular 5

Having trouble with a messaging app, specifically an error related to TS. The syntax checker in the Editor is flagging this issue: Type 'Observable<{}>' is not compatible with type 'Observable'. Type '{}' cannot be as ...

jquery: displaying repeated divs on mouse hover - a tutorial

Let's say we have a div like this: <div class="y1"> <img src="i/o.png" /> </div> Also, we have this div for pre-loading: <!-- pre load --> <div class="p1" style="display:none"> <h5 class="ob">Title</h5> < ...

Increased Z-index on an unfamiliar site

I'm in the process of enhancing the Moodle platform at my school with a userscript, and I want to create a sleek UI for it. One feature I want to add is a progress bar that stays fixed at the top of the browser viewport so that it remains visible as ...

What is the correct method for sending data through a POST request to a PHP script?

UPDATE: I made a mistake while trying to debug the issue. Instead of correctly debugging the AJAX POST request, I was double-clicking the .php file in the Network tab and assuming it was sending the same headers as the actual ajax POST request. This led me ...

There was an issue when trying to create symlinks for the sprkl binaries in /usr/local/bin

I encountered an error while attempting to install this extension on WSL. Any suggestions on how to resolve this issue? I have already tried editing and adding PATH Variables. :~$ npx @sprkl/scripts install ...

Even with minify and uglify plugins implemented, the React App remains unminified

I am facing a major issue with my reactjs app in production, as it exceeds 1.8 MB. I urgently need to reduce the size of the app. Below is the analysis from webpack: https://i.sstatic.net/skVfV.png Here is my webpack.config.js: const path = require( ...

Creating a versatile function in TypeScript for performing the OR operation: A step-by-step guide

Is there a way in TypeScript to create a function that can perform an OR operation for any number of arguments passed? I currently have a function that works for 2 arguments. However, I need to make it work for any number of arguments. export const perfo ...

Error installing NPM package for navigation dependencies in React-navigation due to dependencies issue

Encountering an issue when attempting to install the package. 1 . Command used: npm install @react-native-community/masked-view The error message is as follows: Error code ERESOLVE Unable to resolve dependency tree While resolving: [email protected] Fou ...

Alter hyperlink colors according to <spans>

I am looking to customize the color of links in a chat transcript. Specifically, I want to change the links that the customer sends to red, while keeping the links sent by the agent in blue. Can someone provide guidance on how to achieve this using CSS or ...

I'm currently learning about things that never change and struggling to grasp their meaning

I'm currently delving into the world of immutable.js record and trying to wrap my head around it. However, this particular piece of code is really throwing me for a loop. Here's my Question: I understand [import, export,const], but what ex ...

Having trouble displaying a table accurately in React

My goal is to create a table with Material UI in React, similar to the one shown in this image: https://i.stack.imgur.com/QIV8o.png Below is the code I have written so far for this table: return ( <> <div className="main-wrapper& ...

Is Npm not yet installed on your system?

After successfully downloading node.js from nodejs.org and installing it on my Windows system using gitbash, I encountered an issue while checking the versions. When I ran node -v, it displayed the version number as expected. However, upon running npm -v, ...

Tips for designing a customizable color scheme for your website

Are you looking to implement a changeable color scheme for your website? Getting started can be daunting, especially if you're unfamiliar with sass. Would appreciate it if anyone could share some helpful tutorials or links? For example: example ...

Angular is putting the page on ice - all clicks are officially off limits

When making an HTTP request to the backend in my project, I need the ability to sort of "freeze" the screen until the request is complete. Specifically, I want to prevent users from being able to interact with certain elements on the page, such as a butt ...

Exploring the differences between server-side rendering and client-side rendering in Express using Pug

I find myself in a state of confusion when it comes to distinguishing between what is considered client-side and server-side. Currently, as I develop a website using Pug for my HTML pages without any external files being loaded into the client's brows ...

Deactivate the chosen tab by clicking the Mat-Tab button

I was trying to implement a way to disable the selected mat-tab and its elements when a button is clicked, //HTML <mat-tab-group #tabGroup> <mat-tab *ngFor="let subject of subjects" [label]="subject.name"> {{ subject.name }} ...

The rc-form package in npm is issuing a Warning for the getFieldDecorator method when `defaultValue` is not being used as an option

Currently, I am on the rc-form 2.4.8 version and I am utilizing the getFieldDecorator method in my codebase. However, an issue has arisen: Warning: defaultValue is not a valid property for getFieldDecorator; the correct use is to set value, so please uti ...

How can I ensure that the ons-scroller stays at the bottom when writing a JavaScript code in Onsen UI?

How can I ensure the ons-scroller stays at the bottom when writing JavaScript? This is the code I am using: <ons-page> <ons-toolbar> <div class="left"><ons-back-button>Return</ons-back-butto ...

How can I add styling to materializecss chip elements?

When working with tags on a web page, Materializecss makes it easy. However, I have a requirement where the tags need to be of different colors based on their types. Although this is feasible, another complication arises when supporting Materializecss keyb ...