So verwenden Sie Webpack und Rollup zum Verpacken von Komponentenbibliotheken

Vorwort

Ich habe zuvor eine Komponente im Ladestil erstellt. Um die Wiederverwendbarkeit des Codes zu erreichen, habe ich dieses kleine Projekt verpackt und auf npm veröffentlicht. Während des Verpackungs- und Verteilungsprozesses traten nacheinander Fehler auf. Die Komponente @buzuosheng/loading hat Version 2.7.0 erreicht. Obwohl noch einige Stellen angepasst werden müssen, ist sie endlich verwendbar.

Vergleich zwischen Webpack und Rollup

Webpack ist das von Programmierern am häufigsten verwendete Verpackungstool. Fragen zu Webpack werden in Interviews häufig gestellt, während Fragen zu Rollup deutlich seltener gestellt werden. Ein Grund für dieses Phänomen ist die Idee, webpack für die Anwendungsentwicklung und Rollup für die Bibliotheksentwicklung zu verwenden.

Allerdings verfügen beide Verpackungstools über leistungsstarke Plug-In-Entwicklungsfunktionen und die funktionalen Unterschiede verschwimmen zunehmend, Rollup ist jedoch einfacher zu verwenden und kann kleinere Dateien erzeugen. Beim Erstellen von Front-End-Anwendungen sind für die Leistungsanalyse jedoch häufig kleinere Bibliotheken erforderlich, sodass Rollup eher den Anforderungen von Entwicklungsbibliotheken entspricht.

Dies ist ein Verpackungsexperiment, und wir verwenden zwei Tools zum Verpacken des Projekts.

Bündelung mit webpack

Vor dem Verpacken müssen Sie der Datei package.json einige Felder hinzufügen oder ändern.

{
 // Das Haupteinstiegsmodul des Programms. Der Benutzer referenziert den Export dieses Moduls "main": "dist/bundle.js",
 // Im Projekt "files" enthaltene Dateien: [
  "Quelle",
  "Entfernung"
 ],
 // Verschieben Sie React und React-Dom in diese Konfiguration, kompatibel mit der Abhängigkeit „peerDependencies“: {
  "reagieren": "^17.0.1",
  "reagieren-dom": "^17.0.1"
 },
}

Webpack-Pakete erfordern viele Bibliotheken, um verschiedene Dateien zu verarbeiten. Dieses Projekt ist relativ klein, daher werden nur zwei Bibliotheken verwendet.

// webpack.config.js
const path = require('Pfad');
const MiniCssExtractPlugin = erfordern("mini-css-extract-plugin");

modul.exporte = {
 Modus: 'Produktion',
 Eintrag: './src/Loading.jsx',
 Ausgabe: {
  Dateiname: "index.js",
  Pfad: Pfad.join(__dirname, "./dist/"),
  Bibliotheksziel: 'umd',
 },
 Optimierung:
  minimieren: falsch,
 },
 lösen: {
  Erweiterungen: ['.jsx']
 },
 Modul: {
  Regeln:
   {
    Test: /\.css$/,
    Lader: [MiniCssExtractPlugin.loader, 'css-loader?modules'],
   },
   {
    Test: /\.(js|jsx)$/,
    Lader: "babel-loader",
    ausschließen: /node_modules/,
   },
  ]
 },
 Plugins: [
  neues MiniCssExtractPlugin({
   Dateiname: "main.min.css" // Der Dateiname der extrahierten CSS-Datei})
 ],
}

Ich hätte über die Konfigurationen sowohl für Entwicklungs- als auch für Produktionsumgebungen schreiben sollen, aber hier habe ich nur über die Konfiguration für die Produktionsumgebung geschrieben.

Rollup verwenden

Im Rollup werden weitere Bibliotheken verwendet.

// rollup.config.js
// Lösen Sie das Problem, dass Rollup CommonJS nicht erkennen kann. Importieren Sie CommonJS von „Rollup-Plugin-CommonJS“.
// Babel übernimmt die Konvertierung des ES6-Codes. Importiere Babel von „Rollup-Plugin-Babel“.
// resolve führt den von uns geschriebenen Quellcode mit den abhängigen Drittanbieterbibliotheken zusammen import resolve from 'rollup-plugin-node-resolve'
// Postcss verarbeitet CSS-Dateien und importiert Postcss aus „Rollup-Plugin-Postcss“.

Standard exportieren {
 Eingabe: "src/Loading.jsx",
 // Paketiere eine cjs-Datei und eine es-Dateiausgabe: [
  {
   Datei: "dist/loading.es.js",
   Format: "es",
   Globale:
    reagieren: 'Reagieren',
   },
  }, {
   Datei: 'dist/loading.cjs',
   Format: "cjs",
   Globale:
    reagieren: 'Reagieren',
   },
  },
 ],
 extern: ['reagieren'],
 Plugins: [
  postcss(
   { Erweiterungen: ['.css'] }
  ),
  babel({
   ausschließen: "node_modules/**",
   Laufzeithelfer: true,
  }),
  commonjs(),
  lösen(),
 ],
}

Paket an npm senden

Zum Veröffentlichen in npm sind nur wenige Befehle erforderlich.

npm-Paket

Nach dem Packen des Projekts gibt die Kommandozeile ausführliche Informationen zum komprimierten Paket aus.

Aktualisierte Version

npm-Version [<neue Version> | Hauptversion | Nebenversion | Patch | Premajor | Preminor | Prepatch | Prerelease [--preid=<Prerelease-ID>] | from-git]

Wählen Sie je nach Größe der Änderung unterschiedliche Befehle aus.

Verwenden Sie abschließend den Befehl „Veröffentlichen“.

npm veröffentlichen

Anschließend erhalten Sie eine E-Mail, die Sie über die erfolgreiche Veröffentlichung Ihres Pakets informiert.

Dies ist das Ende dieses Artikels über die Verwendung von Webpack und Rollup zum Verpacken von Komponentenbibliotheken. Weitere relevante Inhalte zum Verpacken von Komponentenbibliotheken mit Webpack und Rollup finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!