[Tech Blog] Create NPM Package by Typescript

Introduction

Hi, I’m Torii, developer from AnyMind Group.

I have been involved in the development of AnyManager since I joined this company as a new graduate.

I want to introduce how to create NPM package

Environement

We will proceed in the following environment

• MacOS Catalina 10.15.7
• Bitbucket: Manage module’s repositories
• Typescript 4.6.3

Goal

Enable to share module created by typescript between different repositories.

• Main Repository: Entry point of processing. Module 1 and Module 2 are imported in this repository。
• Module 1: Module are imported from Main Repository。Module 3 is imported in this repository.
• Module 2: Module are imported from Main Repository。Module 3 is imported in this repository.
• Module 3: Module is commonly imported between Module1 and Module2.

To achieve the goal, you need to set up tsconfig.json and package.json correctly in each repository.

tsconfig.json setting (Module1, Module2, Module3)

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",                                
    "module": "commonjs",                           
    "declaration": true,
    "outDir": "./dist",           
    "strict": true                            
  },
  "include": ["src/**/*"]
}

• declaration: set true to output corresponding .d.ts type definition file with .js file。
• target: Javascript version. We need to guaranteed javascript works on old browsers, so specify es5 for the target.
• outDir: Directory where the tsc output should be placed.

If set declarationMap true, Generates a source map for .d.ts files which map back to the original .ts source file. This will allow editors such as VS Code to go to the original .ts file when using features like Go to Definition, but we emit this option because we don’t include *.ts file in the output. reference: tsconfig.json document

packages.json(Module1, Module2, Module3)

package.json

Please change the name with corresponding with the module.

{
  "name": "@anymind/module1",
  "version": "1.0.0",
  "private": true,
  "files": ["dist"],
  "main": "dist/index.js",
  "scripts": {
    "clean": "rm -rf dist",
    "build": "npm run clean ; tsc"
  },
  "devDependencies": {
    "typescript": "^4.3.4"
  }
}

• name : A name of the module. In the case of the example, module will be installed under node_modules/anymind/module3.
• files: Allow list of files to include in the program when npm install. We only need dist directory for the usage, so specify dist.
• main : Primary entry point to the module.

(eg.1) Call module with short name

module3/package.json

{
  "main": "dist/index.js"
}

module3/dist/index.js

export * from "./functions";

module3 caller

import { func1 } from "@anymind/module3";
//  same
import { func1 } from "@anymind/module3/dist/functions";

• build: run tsc command to compile typescript.

package.json reference

package.json（Main Repository, Module1, Module2）

We are using BitBucket to manage repository, so writing like the following.

Reference: Private NPM Packages in Bitbucket

Main Repository

{
  "dependencies": {
    "@anymind/module1": "bitbucket:adasiaholdings/module1#master",
    "@anymind/module2": "bitbucket:adasiaholdings/module2#master"
  }
}

Module1

{
  "dependencies": {
    "@anymind/module3": "bitbucket:adasiaholdings/module3#master"
  }
}

Module2（Same as Module1）

{
  "dependencies": {
    "@anymind/module3": "bitbucket:adasiaholdings/module3#master"
  }
}

With the above settings, you can call modules created in different repositories.