DEV Community

Shelner
Shelner

Posted on

How to create a simple library using typescript

#webdev #javascript #typescript #npm

1. Initialize the Project 

mkdir my-ts-lib
cd my-ts-lib
npm init -y
Enter fullscreen mode Exit fullscreen mode

2. Install Development Dependencies 

npm install --save-dev typescript tsup eslint prettier
Enter fullscreen mode Exit fullscreen mode

3. Create tsconfig.json 

npx tsc --init
Enter fullscreen mode Exit fullscreen mode

Then edit it like:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "declaration": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "Node",
    "resolveJsonModule": true
  },
  "include": ["src"]
}
Enter fullscreen mode Exit fullscreen mode

4. Create Library Code

Create a src/ folder:

src/
├── index.ts
Enter fullscreen mode Exit fullscreen mode

Example src/index.ts:

export function greet(name: string): string {
  return `Hello, ${name}!`;
}
Enter fullscreen mode Exit fullscreen mode

5. Bundle with tsup

Add tsup.config.ts:

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  clean: true,
});
Enter fullscreen mode Exit fullscreen mode

Add to package.json:

"scripts": {
  "build": "tsup"
}
Enter fullscreen mode Exit fullscreen mode

Run:

npm run build
Enter fullscreen mode Exit fullscreen mode

6. Prepare for Publishing

Edit package.json:

{
  "name": "your-lib-name",
  "version": "1.0.0",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "files": ["dist"],
  "exports": {
    "import": "./dist/index.mjs",
    "require": "./dist/index.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

7. Publish to npm

  1. Log in to npm: 
npm login
Enter fullscreen mode Exit fullscreen mode
  1. Publish: 
npm publish --access public
Enter fullscreen mode Exit fullscreen mode

If the name is taken, either pick a unique name or use a scoped package.

8. Install & Use the Library

Anywhere else:

npm install your-lib-name
Enter fullscreen mode Exit fullscreen mode

Then in code:

import { greet } from 'your-lib-name';

console.log(greet('World'));
Enter fullscreen mode Exit fullscreen mode

References

Github
npm

Top comments (0)