ES6-Code bei npm veröffentlichen

Dieser Beitrag ist Teil einer Serie von ES2015-Beiträgen. Wir werden jede Woche über neue JavaScript-Funktionen berichten!

Der Großteil der Software, mit der wir bei Xebia arbeiten, ist Open Source. Unsere Hauptkompetenz liegt in der Open-Source-Technologie, die unser gesamtes Anwendungspaket umfasst. Wir nutzen nicht nur Open-Source-Projekte, sondern tragen auch zu ihnen bei und veröffentlichen gelegentlich einige unserer eigenen Projekte. Die Veröffentlichung eines Open-Source-Projekts bedeutet nicht nur, dass Sie das GitHub-Repository öffentlich machen. Wenn Sie möchten, dass Ihr Projekt genutzt wird, sollte es einfach zu konsumieren sein. Für JavaScript bedeutet dies, dass Sie es bei npm, dem Paketmanager für JavaScript-Code, veröffentlichen.

Heutzutage schreiben wir unseren JavaScript-Code in der ES6-Syntax. Das ist möglich, weil wir Babel verwenden, um den Code in ES5 zu kompilieren, bevor wir ihn ausführen. Wenn Sie den Code bei npm veröffentlichen, können Sie jedoch nicht erwarten, dass Ihre Paketkunden Babel verwenden. Wenn Sie den Require Hook verwenden, schließt dieser standardmäßig alles aus, was sich unter node_modules befindet, und wird daher nicht versuchen, diesen Code zu kompilieren.

Babel-Einrichtung

Um Babel in unserem Projekt verwenden zu können, müssen wir es so konfigurieren, dass es nützlich ist. Dies geschieht in der Regel mithilfe einer .babelrc-Datei, die im Wesentlichen JSON-formatiert ist:

{
  "plugins": ["transform-runtime"],
  "Voreinstellungen": ["es2015"]
}

Babel sucht für seine Konfiguration automatisch nach der Datei .babelrc, kann aber auch über package.json konfiguriert werden. In diesem Beispiel konfigurieren wir Babel für die Verwendung des transform-runtime Plugins (siehe unten) und verwenden die Voreinstellung es2015, mit der wir die ES2015 (ES6) Syntax in unserem Code verwenden können.

Vorveröffentlichung

Die Realität sieht so aus, dass wir unseren Code in ES5 kompilieren müssen, bevor wir ihn bei npm veröffentlichen, was die Leute, die Bibliotheken in CoffeeScript schreiben, schon lange tun. Glücklicherweise bietet npm eine hilfreiche Möglichkeit, diesen Prozess zu automatisieren: das Prepublish-Skript. Es gibt eine ganze Reihe von Skripten, die Sie verwenden können, um Ihren npm-Workflow zu automatisieren. In package.json definieren wir einfach das Objekt scripts:

{
  "Name": "my-awesome-lib",
  "Version": "1.0.0",
  "Skripte": {
  "Kompilieren": "rimraf lib/* && babel src -d lib",
  "Vorveröffentlichen": "npm run compile"
  },
  "main": "lib/index.js",
  "Abhängigkeiten": {
  "babel-runtime": "^6.11.6"
  },
  "devDependencies": {
  "babel-cli": "^6.11.4",
  "babel-core": "^6.13.2",
  "babel-preset-es2015": "^6.9.0",
  "rimraf": "^2.5.4"
  }
}

Dadurch wird npm automatisch das Kompilierungsskript ausführen, wenn wir das <em class="markup--em markup--p-em">npm publish auf der Befehlszeile, was wiederum das Verzeichnis ./lib leert und babel veranlasst, alles in ./src nach ./lib zu kompilieren (der De-facto-Standard für kompilierte Quellen in npm-Paketen, der von CommonJS stammt). Schließlich definieren wir auch den Haupteinstiegspunkt unseres Pakets, der die zu importierende Datei angibt, wenn require('my-awesome-lib') aufgerufen wird.

Ein wichtiger Teil der Konfiguration ist die Laufzeittransformation. Standardmäßig fügt Babel Hilfsfunktionen wie _extend in jede Datei ein, die sie benötigt, was dazu führt, dass diese Funktionen immer wieder neu definiert werden müssen. Das Laufzeittransformations-Plugin ersetzt diese Funktionen durch require-Aufrufe des babel-runtime-Pakets, das aus diesem Grund eine regelmäßige Abhängigkeit sein muss.

Dateien ignorieren

Es ist einfach, unseren gesamten Quellcode bei npm zu veröffentlichen, aber das müssen wir nicht. Tatsächlich ist es viel schöner, nur die kompilierten Quellen bei npm zu veröffentlichen, so dass Paketkunden nur die Dateien herunterladen müssen, die sie benötigen. Dies können wir mit einer Datei namens .npmignore erreichen:

*
!lib/*

Diese Datei ist der Datei .gitignore sehr ähnlich. Tatsächlich greift npm auf .gitignore zurück, wenn .npmignore nicht vorhanden ist. Da wir wahrscheinlich ./lib in unserem Git-Repository ignorieren wollen, weil es kompilierte Quellen enthält, würde npm dieses Verzeichnis normalerweise nicht einmal veröffentlichen, so dass wir .npmignore verwenden müssen, um das gewünschte Ergebnis zu erzielen. Wenn Sie jedoch möchten, dass Ihre Bibliothek auch direkt über eine Git-URL konsumiert werden kann, können Sie auch ./lib an Git übergeben.

Veröffentlichung

Nun, da alles eingerichtet ist, müssen Sie es nur noch veröffentlichen. Nun, nicht so schnell. Zunächst sollten wir unsere Versionsnummer angeben:

npm Version 1.0.0

Dadurch wird package.json mit der neuen Versionsnummer aktualisiert, diese Änderung an git übergeben und ein git-Tag für v1.0.0 erstellt - alles in einem Schritt. Dies setzt natürlich voraus, dass Sie git verwenden, andernfalls wird einfach package.json aktualisiert. Noch besser ist es, wenn Sie npm automatisch die nächste Versionsnummer ermitteln lassen, indem Sie den Änderungsbereich angeben. Wir sollten auch eine Commit-Nachricht angeben:

npm version patch -m "Erhöhen auf %s aus Gründen"

Weitere Optionen finden Sie in der npm-Dokumentation. Pushen Sie abschließend Ihre neue Version mit Commit und Tag auf GitHub und veröffentlichen Sie unser Paket auf npm:

git push --follow-tags
npm veröffentlichen