DEV Community

Cover image for How to publish common module with reusable functions to npm registry
Bella Be
Bella Be

Posted on • Edited on

How to publish common module with reusable functions to npm registry

#npm #typescript #tutorial

In previous post post we have created a common module of reusable functions with the intention to publish it to npm registry. Here is a quick guide on how to do it.

STEP 1: Create an Organisation within your npm account

There are 3 popular options to publish a package into npm registry:

  • public - package available to everybody at no cost;
  • public or private within an Organisation - package available to members of an Organisation, at a cost if private, at no cost if public;
  • private - package with granted access.

We are not storing any sensitive information, so we will create a public package within an Organisation. Follow the link to do so. Once it is ready, we should update name field in package.json file, I have named mine crypto-project.

{ "name": "@crypto-project/common", "version": "1.0.0", "description": "Module contains helper functions to be used in crypto project", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "typescript": "^5.0.2" }, "dependencies": { "axios": "^1.3.4" } }
Enter fullscreen mode Exit fullscreen mode

STEP 2: Create git repository and commit

In order to publish our package to npm registry, we should init git repository and do the commit. Before proceeding add .gitignore file to exclude node_modules

touch .gitignore && echo "node_modules" > .gitignore
Enter fullscreen mode Exit fullscreen mode

Run git init and do commit

git init git add . git commit -m "initial commit"
Enter fullscreen mode Exit fullscreen mode

STEP 3: Compile typescript to javascript

We will publish our package as javascript one. Update tsconfig.json file: uncomment "declaration": true and "outDir": "./build" fields.

{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "outDir": "./build", "strict": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true } }
Enter fullscreen mode Exit fullscreen mode

Update .gitignore file to exclude build directory from commit

echo "build" > .gitignore
Enter fullscreen mode Exit fullscreen mode

Add build command to package.json file, adjust project entry point, add types field to indicate types definition entry point, add files field to indicate which files to include from our build directory

{ "name": "@crypto-project/common", "version": "1.0.0", "description": "Module contains helper functions to be used in crypto project", "main": "./build/index.js", "types": "./build/index.d.ts", "files": [ "build/**/*" ], "scripts": { "build": "tsc" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "typescript": "^5.0.2" }, "dependencies": { "axios": "^1.3.4" } }
Enter fullscreen mode Exit fullscreen mode

Build command should be run every time we update our package, previous build should be removed. Let's use helper package del-cli to automate the process

npm install -D del-cli
Enter fullscreen mode Exit fullscreen mode

Once it is installed, update package.json file

{ "name": "@crypto-project/common", "version": "1.0.0", "description": "Module contains helper functions to be used in crypto project", "main": "./build/index.js", "types": "./build/index.d.ts", "files": ["build/**/*"], "scripts": { "clean": "del ./build/*", "build": "npm run clean && tsc" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "del-cli": "^5.0.0", "typescript": "^5.0.2" }, "dependencies": { "axios": "^1.3.4" } }
Enter fullscreen mode Exit fullscreen mode

STEP 4.A: First publish

we are ready to publish our package, type the following command in your terminal (root of the package)

npm publish --access public
Enter fullscreen mode Exit fullscreen mode

You should see the following output

npm notice npm notice 📦 @crypto-project/common@1.0.0 npm notice === Tarball Contents === npm notice 338B package.json npm notice 91B src/index.ts npm notice 468B src/smart-contract-utils/abi.ts npm notice 134B src/smart-contract-utils/types/abi.ts npm notice 5.9kB tsconfig.json npm notice === Tarball Details === npm notice name: @crypto-project/common npm notice version: 1.0.0 npm notice filename: @crypto-project/common-1.0.0.tgz npm notice package size: 2.6 kB npm notice unpacked size: 6.9 kB npm notice shasum: 5c9084c410eaf3855e6b568206f2a3a9bad6f528 npm notice integrity: sha512-al7DDvmUOhVeI[...]7rJzedBAjfSgw== npm notice total files: 5 npm notice npm notice Publishing to https://registry.npmjs.org/ + @crypto-project/common@1.0.0
Enter fullscreen mode Exit fullscreen mode

If the output is an error instead, make sure you are logged in by typing npm login and entering the same username and password you use to login npmjs.com.

STEP 4.B: Publish after a change

To publish after a change we should follow a slightly different flow and it consists of following steps:

  • update git repository
  • increment version (most popular are patch, minor, mahor)
  • build
  • publish

Last 3 steps could be wrapped into one script, let's add it to our package.json file

{ "name": "@crypto-project/common", "version": "1.0.0", "description": "Module contains helper functions to be used in crypto project", "main": "./build/index.js", "types": "./build/index.d.ts", "files": [ "build/**/*" ], "scripts": { "clean": "del ./build/*", "build": "npm run clean && tsc", "pub": "npm version patch && npm run build && npm publish" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "del-cli": "^5.0.0", "typescript": "^5.0.2" }, "dependencies": { "axios": "^1.3.4" } }
Enter fullscreen mode Exit fullscreen mode

That's it. We have our base package and we are able to publish/re-publish it to npm registry. Link to github repo is here.

Top comments (0)