What is the best way to distribute a Typescript module across multiple projects without having to duplicate it each time?

Question

What is the best way to distribute a Typescript module across multiple projects without having to duplicate it each time?

I currently have two folders named shared and project1 within a larger folder called node. I am in the process of working on multiple Node projects that are independent and are all located within the node folder.

Within the shared folder, there is an index.ts file that contains a default export. The outdir parameter in the tsconfig.json file is set to ./dist. Once the project is built, the directory structure looks like this:

node/shared/
           src/
              index.ts
           dest/
               index.js
           tsconfig.json
           ...

For project1, the directory structure post-build looks like:

node/project1/
             src/
                index.ts
             dist/
                 index.js

The purpose of the shared folder is to hold common utilities that can be shared among the different projects within the node folder.

However, when I try to import the shared utilities using the statement

import shared from "../../shared/src/index.js"

in the project1/src/index.ts file, the resulting compiled output in the dest folder is chaotic:

node/project1/
             src/
                index.js
             dest/
                 shared/
                       src/
                          index.js  <- copied from the shared project
                 project1/
                         src/
                            index.js

Nevertheless, this setup is not functional as the node modules that are installed in the shared project are not accessible in project1.

My goal is to have a simple run-time environment without duplicating shared code across projects, like so:

node/
    shared/
          index.js
    project1/
            index.js   <- importing from shared/index
    project2/
            index.js   <- importing from shared/index

Is this feasible, or is converting the shared module into an NPM package the only viable solution?

typescript

Answer 1

Answer №1

To implement project references, you can visit the following link: project references.

node/
  project1/
    dist/
      index.js
    src/
      index.ts
    tsconfig.json
  shared/
    dist/
      index.js
      index.d.ts
    src/
      index.ts
    package.json
    tsconfig.json

Shared

This project is constructed like a regular project, with the addition of enabling the composite setting.

shared/tsconfig.json

{
  "compilerOptions": {
    // The referenced projects must have the composite flag turned on
    "composite": true,
    "rootDir": "./src",
    "outDir": "./dist",
    "module": "commonjs"
  }
}

shared/package.json

{
  "name": "shared",
  "version": "0.0.1",
  "main": "./dist",
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "typescript": "^4.0.3"
  }
}

shared/src/index.ts

export default 'foo'

The resulting output in shared/dist/index.js is as follows:

"use strict";
exports.__esModule = true;
exports["default"] = 'foo';

Due to the presence of the composite compiler flag, type definitions are generated as well:

shared/dist/index.d.ts

declare const _default: "foo";
export default _default;

Project

project1/tsconfig.json

In this file, you need to specify that you are referencing the shared module.

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  },
  "references": [
    {"path": "../shared"}
  ]
}

project1/package.json

Instead of running a plain tsc command, you can opt for tsc --build (or tsc -b for short). This build mode ensures that referenced projects are automatically rebuilt if they are outdated. Keep in mind that there are specific build-only flags and compiler options cannot be overridden with command-line arguments.

{
  "name": "project1",
  "version": "0.0.1",
  "main": "./dist",
  "scripts": {
    "build": "tsc -b"
  },
  "devDependencies": {
    "typescript": "^4.0.3"
  }
}

project1/src/index.ts

Utilize the shared module just like any other module.

import foo from '../../shared'

console.log(foo)

project1/dist/index.js

After compilation, the source code transforms into the following:

"use strict";
exports.__esModule = true;
var shared_1 = require("../../shared");
console.log(shared_1["default"]);

As you can observe, it correctly imports the shared module from the node/shared directory without duplicating files into the dist directory.

There is no need to specify the complete file path (../../shared/dist/index.js) because the shared project's package.json file has the main field set to ./dist, which resolves to ./dist/index.js. TypeScript understands that Node.js will resolve the require to the correct file and thus recognizes the types of the shared module.

If there is no main entry in the package.json, you will have to use

import foo from '../../shared/dist'

.

Answer 2

To implement project references, you can visit the following link: project references.

node/
  project1/
    dist/
      index.js
    src/
      index.ts
    tsconfig.json
  shared/
    dist/
      index.js
      index.d.ts
    src/
      index.ts
    package.json
    tsconfig.json

Shared

This project is constructed like a regular project, with the addition of enabling the composite setting.

shared/tsconfig.json

{
  "compilerOptions": {
    // The referenced projects must have the composite flag turned on
    "composite": true,
    "rootDir": "./src",
    "outDir": "./dist",
    "module": "commonjs"
  }
}

shared/package.json

{
  "name": "shared",
  "version": "0.0.1",
  "main": "./dist",
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "typescript": "^4.0.3"
  }
}

shared/src/index.ts

export default 'foo'

The resulting output in shared/dist/index.js is as follows:

"use strict";
exports.__esModule = true;
exports["default"] = 'foo';

Due to the presence of the composite compiler flag, type definitions are generated as well:

shared/dist/index.d.ts

declare const _default: "foo";
export default _default;

Project

project1/tsconfig.json

In this file, you need to specify that you are referencing the shared module.

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  },
  "references": [
    {"path": "../shared"}
  ]
}

project1/package.json

Instead of running a plain tsc command, you can opt for tsc --build (or tsc -b for short). This build mode ensures that referenced projects are automatically rebuilt if they are outdated. Keep in mind that there are specific build-only flags and compiler options cannot be overridden with command-line arguments.

{
  "name": "project1",
  "version": "0.0.1",
  "main": "./dist",
  "scripts": {
    "build": "tsc -b"
  },
  "devDependencies": {
    "typescript": "^4.0.3"
  }
}

project1/src/index.ts

Utilize the shared module just like any other module.

import foo from '../../shared'

console.log(foo)

project1/dist/index.js

After compilation, the source code transforms into the following:

"use strict";
exports.__esModule = true;
var shared_1 = require("../../shared");
console.log(shared_1["default"]);

As you can observe, it correctly imports the shared module from the node/shared directory without duplicating files into the dist directory.

There is no need to specify the complete file path (../../shared/dist/index.js) because the shared project's package.json file has the main field set to ./dist, which resolves to ./dist/index.js. TypeScript understands that Node.js will resolve the require to the correct file and thus recognizes the types of the shared module.

If there is no main entry in the package.json, you will have to use

import foo from '../../shared/dist'

.

What is the best way to distribute a Typescript module across multiple projects without having to duplicate it each time?

Answer №1

Shared

Project

Similar questions

Tips for creating a window closing event handler in Angular 2

What is the correct way to utilize a variable as a parameter in React Query while employing the axios.request(options) method?

Error: Unable to access the 'https' property as it is undefined

I'm having trouble importing sqlite3 and knex-js into my Electron React application

Necessary Typescript class property when executing code

Exploring the depths of friendship with React-Router V6 through recursive routes

Having trouble with the Angular Language Service extension in VS Code for Angular-16?

The properties required by the type for typescript reactjs are not present

What is the reason behind TypeScript enclosing a class within an IIFE (Immediately Invoked Function

Angular - Dividing Values within Input Arrays

Tips for stopping webpack from creating compiled files in the source directory

Having T extend Record<string, any>, the keyof T does not return 'string' as a type

Creating a type declaration for an object by merging an Array of objects using Typescript

Issue encountered when attempting to run "ng test" in Angular (TypeScript) | Karma/Jasmine reports an AssertionError stating that Compilation cannot be undefined

Typescript enhances the functionality of the Express Request body

How to smoothly transition between different components in Angular 2 with scroll actions

Guide on organizing the Object into a precise structure in Angular

What is the best way to disable a collapsed section in VS Code using comments?

Setting the "status" of a queue: A step-by-step guide

Is it possible to retrieve cached data from React Query / Tan Stack Query outside of the React tree?