npm link
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>
. Thelibrary-name
can be found in thepackage.json
file of the library project. In this case, its name isbfs-net-link
. Therefore, the command would benpm 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
.
Vite
Front-End Library Template based on package.json
Final {
"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';
index.ts
Create src
index.ts
// index.ts
export { library_one, library_two } from './test'
vite.config.ts
Create // 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()],
});
package.json
Edit 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
eslint
Install and initialize the npx eslint --init
package.json
Complete // 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