How to Build and Publish a Simple NPM Package with TypeScript

🧩 How to Build and Publish a Simple NPM Package with TypeScript

Creating your own npm package is one of those milestones that turns a developer from a code consumer into a code contributor.

In this walkthrough, we’ll build a small, functional npm package in TypeScript — one that checks whether your import statements are in alphabetical order.

The same workflow applies to any utility, CLI, or library you want to publish.

⚙️ 1. Project Setup

Start fresh:

mkdir repo-import-sorter

cd repo-import-sorter

npm init -y

npm install typescript eslint chalk globby --save

npm install --save-dev @types/node

npx tsc --init

This creates your project with TypeScript, ESLint, and some handy utilities.

Key files created:

repo-import-sorter/

├── package.json

├── tsconfig.json

├── src/

│   └── index.ts

🧱 2. Define the Package Metadata

Edit your package.json to include the essentials:

{

  "name": "repo-import-sorter",

  "version": "1.0.0",

  "description": "CLI tool to check import order in TypeScript projects",

  "main": "dist/index.js",

  "types": "dist/index.d.ts",

  "scripts": {

    "build": "tsc",

    "start": "node dist/index.js"

  },

  "bin": {

    "repo-sorter": "dist/index.js"

  },

  "files": ["dist"],

  "keywords": ["cli", "typescript", "import-sorter"],

  "author": "Your Name",

  "license": "MIT"

}

🧭 Tip:

The "bin" section makes this a command-line tool that users can run with repo-sorter once installed globally.

🧩 3. Write the Source Code

Create src/index.ts:

#!/usr/bin/env node

import fs from 'fs';

import path from 'path';

import globby from 'globby';

import chalk from 'chalk';

async function checkImportOrder(repoPath: string) {

  const files = await globby(['**/*.ts'], { cwd: repoPath, gitignore: true });

  for (const file of files) {

    const content = fs.readFileSync(path.join(repoPath, file), 'utf-8');

    const imports = content.match(/^import .* from .*$/gm);

    if (imports && !isSorted(imports)) {

      console.log(chalk.yellow(`⚠️  Imports not sorted in: ${file}`));

    }

  }

}

function isSorted(arr: string[]) {

  const sorted = [...arr].sort();

  return JSON.stringify(arr) === JSON.stringify(sorted);

}

const repoArg = process.argv[2] || '.';

checkImportOrder(repoArg)

  .then(() => console.log(chalk.green('✅ Import order check complete')))

  .catch(err => console.error(chalk.red(err.message)));

Run your build step:

npm run build

Now test it locally:

npm install -g .

repo-sorter .

You’ll see color-coded feedback for any import order issues.

🚀 4. Prepare for Publication

Before publishing:

1. Ignore unnecessary files — create a .npmignore if needed.

2. Build for distribution — npm run build compiles to /dist.

3. Login to npm — npm login

4. Publish — npm publish --access public

Your package will now be live on npmjs.com.

🧭 5. What You Learned

✅ Setting up a TypeScript npm package

✅ Creating a CLI entry point with bin

✅ Using libraries like chalk and globby

✅ Building and publishing your own package

💡 Closing Thought

Building your own npm package teaches you the modularity mindset — writing reusable code for others (and your future self).

Once you’ve done one, you’ll find yourself packaging micro-utilities constantly.

✨ Code is more powerful when it’s shared.