How to create a local module in TypeScript

Question

I have created in folder src/modules/my-module/ which has package.json and defined the main file which exports everything we need.

I can import from it now import {A} from '../../modules/my-module'

I want to change the syntax into import {A} from 'my-module' and I have a few reasons for it:

• When I move the module to another folder, I do not want to change all the code calling this module.
• Later, I would like to have the possibility to move the module to a separate repository as the npm package and reuse it in multiple projects. I do not want to change all calling code later.

I have managed to compile it by adding to tsconfig.json

"paths": {
  "my-module": ["src/modules/my-module"]
}

But I can't run the result via node.js as the node can't find the module. Is there any way to use non-realtive module reference in such scenario.

Answer 1

By the sounds of it, what you're wanting to do is package up your local my-module so that it can be used in the same way you'd install and use a package from the npm registry.

When you're doing local development, its easy to configure a dependency to reference to your module as a file path - though you need to have your typescript transpiled for it to work in your case.

Here's the method I'm using for local development, in an environment where we have many utility modules for a microservices architecture. I package the module into an archive and install it using npm install:

---

• Use npm pack to package the module into a .tgz. Our package.json defines the target directory to be packaged, and the build script performs the transpile into the target (obviously adjust for your needs):

  ...
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "npx babel src --out-dir dist --extensions .ts,.tsx,.js --ignore **/*.test.ts,**/*.test.tsx",
  ...

• Run npm pack and install the generated package in your application

/my-module/> npm pack
/my-module/> cd ../my-app
/my-app/> npm install --save ../my-module/my-module-0.0.1.tgz

Or as an all-in-one (builds tgz in my-app dir):

/my-app/> && npm pack ../my-module && npm i -s my-module-0.0.1.tgz

---

Once you're done with development, you'll probably want to publish your module in a way that its available to your project(s) on deployment.

Your options are along the lines of:

• Publish to your local system using npm link
• Publish to a private registry
• Publish to the npm registry (as either a public or private module)

Here's a good resource for these options: https://medium.com/@debshish.pal/publish-a-npm-package-locally-for-testing-9a00015eb9fd

Answer 2

TS doesn't convert that "my-module" when transpiling your ts files to js.

Using module-alias package might solve your problem.

Add this configuration below into package.json:

"_moduleAliases": {
   "my-module": "<your_build_folder>/modules/my-module"
},

And this code on first line of your main file (server.ts/index.ts)

import 'module-alias/register';

Answer 3

Add local module as dependency to package.json (in the root of your project):

  "dependencies": {
    "my-module": "file:src/modules/my-module",
    ...
  }

Configure your typescript settings like here @tsconfig/recommended

Run npm install my-module in your root folder

Then you can do:

import {A} from 'my-module'

Answer 4

You can transpile your external local project (reference project) since Typescript 3 in July 2018.

See: How to share code between TypeScript projects?