What is the best way to organize my NPM package with separate directories for types and functions?

Question

What is the best way to organize my NPM package with separate directories for types and functions?

I am currently working on developing a custom NPM package that will serve as a repository for sharing types and functions across my project. Let's name this project wordle. Given the emphasis on types, it is worth noting that I am using TypeScript for this project. My goal is to be able to import these types and functions in the following manner:

import { Move } from "wordle-shared/types";
import { getValidWords } from "wordle-shared/utils"

I would appreciate it if someone could guide me on how I should structure this NPM package to achieve the desired organization. I have noticed that some developers use @ in their package names (e.g. @wordle-shared), so I am open to incorporating that naming convention if necessary.

Currently, my folder structure looks like this:

wordle-shared
├── src
│   ├── types
│   └── utils
├── package.json
├── tsconfig.json
├── .gitignore

typescript npm package.json tsconfig monorepo

Answer 1

Answer №1

Have you considered utilizing npm workspaces for your project structure? This approach could help organize your packages in a way that aligns with your requirements, allowing each package to manage its dependencies and interact with others seamlessly.

// ./wordle/package.json
{
    "name": "wordle",
    "workspaces": [
        "wordle-shared",
        "wordle-project-a",
    ]
}

.
├── node_modules
│   ├── .package-lock.json
│   ├── wordle-project-a -> ../wordle-project-a
│   └── wordle-shared -> ../wordle-shared
├── package.json
├── package-lock.json
├── wordle-project-a
│   ├── package.json
│   └── src
│       └── index.ts
└── wordle-shared
    ├── package.json
    ├── types
    │   └── index.ts
    └── util
        └── index.ts

This configuration allows you to access wordle-shared's functionalities in wordle-project-a as needed. If you prefer segregating them into distinct src/ directories, consider setting up a path alias in tsconfig.json.

Answer 2

Have you considered utilizing npm workspaces for your project structure? This approach could help organize your packages in a way that aligns with your requirements, allowing each package to manage its dependencies and interact with others seamlessly.

// ./wordle/package.json
{
    "name": "wordle",
    "workspaces": [
        "wordle-shared",
        "wordle-project-a",
    ]
}

.
├── node_modules
│   ├── .package-lock.json
│   ├── wordle-project-a -> ../wordle-project-a
│   └── wordle-shared -> ../wordle-shared
├── package.json
├── package-lock.json
├── wordle-project-a
│   ├── package.json
│   └── src
│       └── index.ts
└── wordle-shared
    ├── package.json
    ├── types
    │   └── index.ts
    └── util
        └── index.ts

This configuration allows you to access wordle-shared's functionalities in wordle-project-a as needed. If you prefer segregating them into distinct src/ directories, consider setting up a path alias in tsconfig.json.

Answer 3

Answer №2

From what I know, in order for TypeScript to properly load your package, a build step is necessary because it expects to find d.ts files.

One alternative could be using git submodules to directly incorporate the library code into your project instead of deploying and installing it as a package. While I haven't personally tested this method or workspaces, I believe it would seamlessly integrate with TypeScript, eliminating the need to build while still keeping the library versioned.

Here is an example of setting up the package using tsc:

wordle-shared
├── src
│   ├── types.ts
│   └── utils.ts
├── dist
│   ├── types.d.ts
│   └── utils.js
│   └── utils.d.ts
├── package.json
├── tsconfig.json
├── .gitignore

// wordle-shared package.json
{
    "type": "module",
    "version": "1.0.0",
    "exports": {
        "./utils": {
            "import": "./dist/utils.js",
            "types": "./dist/utils.d.ts"
        }, "./types": {
            "types": "./dist/types.d.ts"
        }
    }
}

// wordle-shared tsconfing.json
{
    "compilerOptions": {
        "outDir": "./dist",
    },
    "include": ["src"],
}

// .gitignore
node_modules
dist

Afterwards, you can add the shared library as a dependency

// wordle package.json
{
  "dependencies": {
    "wordle-shared": "^1.0.0",
  }
}

Make sure to include this compiler option for TypeScript to recognize the types fields in the library's package.json

// wordle tsconfing.json
{
    "compilerOptions": {
        "moduleResolution": "nodenext"
    },
}

Answer 4

From what I know, in order for TypeScript to properly load your package, a build step is necessary because it expects to find d.ts files.

One alternative could be using git submodules to directly incorporate the library code into your project instead of deploying and installing it as a package. While I haven't personally tested this method or workspaces, I believe it would seamlessly integrate with TypeScript, eliminating the need to build while still keeping the library versioned.

Here is an example of setting up the package using tsc:

wordle-shared
├── src
│   ├── types.ts
│   └── utils.ts
├── dist
│   ├── types.d.ts
│   └── utils.js
│   └── utils.d.ts
├── package.json
├── tsconfig.json
├── .gitignore

// wordle-shared package.json
{
    "type": "module",
    "version": "1.0.0",
    "exports": {
        "./utils": {
            "import": "./dist/utils.js",
            "types": "./dist/utils.d.ts"
        }, "./types": {
            "types": "./dist/types.d.ts"
        }
    }
}

// wordle-shared tsconfing.json
{
    "compilerOptions": {
        "outDir": "./dist",
    },
    "include": ["src"],
}

// .gitignore
node_modules
dist

Afterwards, you can add the shared library as a dependency

// wordle package.json
{
  "dependencies": {
    "wordle-shared": "^1.0.0",
  }
}

Make sure to include this compiler option for TypeScript to recognize the types fields in the library's package.json

// wordle tsconfing.json
{
    "compilerOptions": {
        "moduleResolution": "nodenext"
    },
}

What is the best way to organize my NPM package with separate directories for types and functions?

Answer №1

Answer №2

Similar questions

Issue with Next.js: Router.push not causing page to refresh

Encountering a strange log and receiving errno -2 while trying to npm install

Tackling the challenge of merging PDF files and designing a Table of Contents feature reminiscent of Acrobat in Node.js and JavaScript

Error encountered in MDAVSCLI: EPERM, operation not allowed on 'C:WindowsCSCv2.0.6'

Tips for resolving Electron npm audit fix errors?

Having issues with installing serialport using npm

What are the drawbacks of relying on a dependent dependency in software development?

Iterating through an array with ngFor to display each item based on its index

What is TS's method of interpreting the intersection between types that have the same named function properties but different signatures (resulting in an error when done

Error TS2339: The 'selectpicker' property is not found on the 'JQuery<HTMLElement>' type

The type 'string | undefined' cannot be assigned to type 'string'

What is the best way to pass props to a styled component (e.g., Button) in Material-UI

Comparing Yeoman's Angular generator to using Grunt `serve` and `http

Incorporate a visual element into an Angular Library Component Template using an image asset

Setting up TypeScript to function with Webpack's resolve.modules

Angular8: Adjusting Activity Status After Leaving Page

Changes on services do not affect the Angular component

Error occurred during the file watch process in PhpStorm after saving the CSSO file

Guide on sending JSON object to Angular custom components

Utilize a function to wrap the setup and teardown code in Jest