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
: settrue
to output corresponding .d.ts type definition file with .js file。target
: Javascript version. We need to guaranteed javascript works on old browsers, so specifyes5
for the target.outDir
: Directory where thetsc
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 undernode_modules/anymind/module3
.files
: Allow list of files to include in the program whennpm install
. We only needdist
directory for the usage, so specifydist
.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
: runtsc
command to compile typescript.
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.