Link npm link

Expose library to global space

• Navigate to the library directory, for example, cd ~/Documents/bits-fusion/bfs-frontend-library.
• Execute the command npm run build to build the latest version of the library.
• Execute the command npm link to hide the library from the global space.

Utilize library from global space

• Navigate to the application directory, for example, ~/Doc/b/bfs-frontend-library/tester.
• Execute the command npm link <library-name>. The library-name can be found in the package.json file of the library project. In this case, its name is bfs-net-link. Therefore, the command would be npm link bfs-net-link.

Remove the library's global connection

• Go to the project directory.
• Run npm unlink bfs-net-link.

Conceal library from global space

• Go to the library directory.
• Execute npm unlink.

Front-End Library Template based on Vite

Final package.json

{
  "name": "bfs-net-link",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "./dist/bfs-net-link.umd.cjs",
  "module": "./dist/bfs-net-link.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/bfs-net-link.js",
      "require": "./dist/bfs-net-link.umd.cjs"
    }
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@types/node": "^20.3.3",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "eslint": "^8.44.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vite-plugin-dts": "^3.0.2"
  }
}

Reference

https://onderonur.netlify.app/blog/creating-a-typescript-library-with-vite/

Create a new project

npm create vite@latest

Install dependencies

npm install

Run development

npm run dev

Build application

npm run build

Preview Application

npm run preview

Install building packages

npm install -D @types/node vite-plugin-dts

Create library files

test
  lib1.ts
  lig2.ts
  index.ts

// lib1.ts
export const library_one = {
    value: 123,
    syHello: (name: string) => {
        console.log(`Hello ${name} from lib1`);
    }
}

// lib2.ts
export const library_two = {
    value: 234,
    syHello: (name: string) => {
        console.log(`Hello ${name} from lib2`);
    }
}

// index.ts
export { library_one } from './lib1';
export { library_two } from './lib2';

Create index.ts

src
  index.ts

// index.ts
export { library_one, library_two } from './test'

Create vite.config.ts

// vite.config.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
// https://vitejs.dev/guide/build.html#library-mode
export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'my-lib',
      fileName: 'my-lib',
    },
  },
  plugins: [dts()],
});

Edit package.json

Add these line to the package.json

  "main": "./dist/bfs-net-link.umd.cjs",
  "module": "./dist/bfs-net-link.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/bfs-net-link.js",
      "require": "./dist/bfs-net-link.umd.cjs"
    }
  },

Build

npm run build

Preview the package

npm pack --dry-run   

Versioning

npm version patch
# Bumps the patch number like 0.0.0 -> 0.0.1

npm version minor
# Bumps the patch number like 0.0.x -> 0.1.0

npm version major
# Bumps the patch number like 0.x.y -> 1.0.0

Install and initialize the eslint

npx eslint --init

Complete package.json

// package.json
{
  // ...
  "description": "This is a simple utility package",
  "author": "drsanti",
  "license": "MIT",
  "homepage": "bits-fusion.com",
  "repository": {
    "type": "git",
    "url": "https://github.com/drsanti/bfs-net-link.git"
  },
  "bugs": {
    "url": "https://github.com/drsanti/bfs-net-link/issues"
  },
  "keywords": ["bits-fusion", "websocket", "iot", "realtime", "front-end"],
  // ...
}

Publish

npm publish

Link

https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557