Lokale npm library erstellen und einbinden (TypeScript, VSCode)

Damit man eine selbst erstellte JavaScript / TypeScript library auch in anderen Projekten wiederverwenden kann, ist es möglich diese via npm auch lokal vom Filesystem einzubinden (Man muss das Package nicht von einem Server hosten lassen.).

Dieses Template ist als Erweiterung meines bisherigen Start Templates zu sehen (TypeScript - Node.js - Start Template - Update). Wenn die Projekte größer werden oder man Teile auch in anderen Projekten wiederverwenden will, ist es eine tolle Idee eine Library zu erstellen.

1. Library erstellen

PowerShell verwenden:

mkdir starter-lib-1
cd starter-lib-1

npm init --yes
tsc --init
	
New-Item README.md -ItemType File
New-Item .gitignore -ItemType File
New-Item src -ItemType Directory
New-Item src\index.ts -ItemType File
npm install lodash --save
npm install @types/lodash --save-dev
	
code .

index.ts:

import * as _ from "lodash"; 
export class StarterLib { 
	public static camelStyle(input: string): string {
		console.log(`camelStyle(${input})`);
		return _.camelCase(input);
	}
}

package.json:

...
"main": "dist/index",
"typings": "dist/index",
"files": [
  "dist",
  "src"
],
...

“src” … dadurch hat man die Möglichkeit, dass man in das TypeScript File der library debuggen kann.

tsconfig.json:

...
"declaration": true,
"sourceMap": true, 
"outDir": "dist/",
"rootDir": "src/", 
...

“declaration” … ein d.ts. file wird für die Library erstellt.

Alles Speichern, nicht vergessen.

Task runner erstellen:

Pannel öffnen: F1 (oder Ctrl+P): task (oder >task) eintippen
Tasks: Configure task runner
TypeScript - tsconfig.json auswählen.

Ab VSCode Version 1.14 gibt es ein Tasks Menü in der oberen Menüleiste:
Tasks / Configure Default Build Task
Auswahl: tsc: build tsconfig.json

Damit ist die Library fertig.

Sie kann mit Ctrl + Shift + B gebildet werden.

2. Einbinden in das Hauptprojekt

Nun die lib in einem anderen Projekt verwenden. Ich verwende hier das Start Template TypeScript - Node.js - Start Template - Update aus einem früheren Eintrag.

package.json

Unsere soeben erstellte Library start-lib-1 in der package.json Datei des Hauptprojektes bekanntgeben. Wie man sieht liegt das Library Projekt bei mir direkt neben dem Hauptprojekt.

Man muss den relativen Pfad natürlich entsprechend der eigenen Verzeichnisstruktur anpassen.

...
"dependencies": {
    "lodash": "^4.17.4",
    "starterlib": "file:../starter-lib-1"
},
...

File speichern und nun alle Bibliotheken installieren:

npm install

Man sieht im Ordner node_modules, dass die Dateien der library installiert wurden.

index.ts

import {Utils} from "./common/utils";
import {StarterLib} from "starter-lib-1";

let s = Utils.kebabStyle("Gurke Tomate Zwiebel"); 
console.log(s); 

s = StarterLib.camelStyle("Gurke Tomate Zwiebel"); 
console.log(s);

3. Starten

Ctrl+Shift+B… Projekt builden.
F5 … Debuggen.

Breakpoint setzten, mit F5 den Debugger starten und mit F11 in die library reindebuggen.

4. Anmerkungen

Ein paar Hinweise, die beim Aufbau einer Library Infrastruktur (z.B. für eine Abteilung) hilfreich sein könnten.

Version erhöhen und paketieren.

Will man ein Packagefile erzeugen sind folgende Schritte notwendig:

npm version patch | npm pack

Das Paket auspacken und Ordner entsprechend umbenennen, so dass folgende Ordnerstruktur und Dateien vorhanden sind:

\pack\starter-lib-1-1.0.1
	
  package.json
  README.md
  dist/index.d.ts
  dist/index.js
  dist/index.js.map

Das Src Verzeichnis wurde nicht erzeugt, weil im package.json der Library vorher src entfernt wurde.

Im package.json File des Hauptprojektes ist die Datei dann folgendermaßen zu referenzieren:

    "starterlib": "file:../starter-lib-1/pack/starter-lib-1-1.0.2/package"

Package Server

Es ist natürlich auch möglich einen eigenen Package Server (TFS, Nexus, Verdaccio, …) zu installieren, der dann das npm Package hostet, bzw. falls man eine öffentliche Library erstellt hat, kann man dieses Paket auch auf npmjs.com hochladen.

Doppelte Libraries

Durch das Einbinden von externen libraries in verschiedenen Versionen (die library verwendet eine externe library und das Hauptprojekt verwendet ebenfalls diese externe library), kann es zu Problemen führen. Stichwörter, zum Suchen von möglichen Lösungen: “peerDependencies”.