Wie verpacke ich die KOA2-Framework-App über Webpack? Was soll ich tun?

In diesem Artikel werden die Schritte und die endgültige Bereitstellung der Verwendung von Webpack zum Packen des Koa2-Frameworks vorgestellt. Dies ist sehr praktisch. Freunde in Not können sich darauf beziehen.

Als ich in der Vergangenheit Koa zum Schreiben von Servern verwendet habe , das Veröffentlichen war einfach ein Albtraum. Alle Dateien in src müssen überschrieben werden, und die Konfigurationsdatei config muss ebenfalls überschrieben werden. Wenn Sie nicht aufpassen, werden verschiedene Probleme online gemeldet, und Sie müssen sie vor der Veröffentlichung lokal zurücksetzen und anpassen. Ich habe zufällig einen Artikel über die Verwendung von Webpack zum Packen einer Koa-App gesehen. Es stellte sich heraus, dass Webpack auch das Backend packen kann. Daran hatte ich noch nie gedacht.

Hauptprobleme

1: Alle Module in node_modules sind nicht gepackt

Die Kernfunktion von Webpack besteht darin, auf jedes einzelne zu verweisen Das Modul wird in eine Datei eingegeben und verschiedene standardisierte Module werden vereinheitlicht und modularisiert (Webpack-Spezifikation).

Der Knoten enthält jedoch eine große Anzahl von FS- und Pfadoperationen, nachdem die Paketierung abgeschlossen ist, und es werden viele verschiedene Fehler gemeldet.

Der Kern der Verwendung von Webpack zum Packen besteht also darin, das Packen aller Module in node_modules zu verweigern und nur die Dateien, auf die durch relative Pfade verwiesen wird, in eine Datei zu packen. Wir haben festgestellt, dass webapck das Attribut externals bereitstellt, um Module auszuschließen, die nicht gepackt werden müssen.

Wenn wir tiefer graben, können wir feststellen, dass Module wie Webpack, Nodemon und babel-preset-env Pakete sind, von denen die App-Entwicklungsumgebung abhängt, und dass unser Programm diese Module überhaupt nicht benötigt.

Zusammenfassend können wir Folgendes feststellen: Wir müssen nur alle erforderlichen Pakete ausschließen. Dieses Modul entspricht dem Modul unter Abhängigkeiten in package.json. Es ist wichtig, den Unterschied zwischen Abhängigkeiten und DevDependencies zu verstehen.

Wir können also das Externals-Dependences-Plugin mit dem Externals-Attribut verwenden, um Abhängigkeiten auszuschließen.

Code:

const webpack = require('webpack');
const _externals = require('externals-dependencies')
module.exports = {
  ...
  externals: _externals(),
  ...
}

Zwei: Zielpunkte auf Knoten

Offizielle Dokumentation: Kompiliert in einer Node.js-ähnlichen Umgebung verfügbar (verwenden Sie Node. js ist zum Laden von Chunks erforderlich)

Code:

target: 'node',

Drei: Knotenkonfiguration hinzufügen

Offizielle Dokumentation: Mit diesen Optionen kann konfiguriert werden, ob Polyfill oder Mock verwendet werden soll bestimmte globale Variablen und Module von Node.js. Dadurch kann Code, der ursprünglich für die Node.js-Umgebung geschrieben wurde, in anderen Umgebungen wie Browsern ausgeführt werden.

Code:

node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
},

Viertens: Babel-Konfiguration

Um mit dem Problem kompatibel zu sein, dass niedrigere Versionen des Knotens Async/ nicht nativ unterstützen erwarten. Hier verwende ich die Konfiguration babel-preset-env{"modules": false} für babel. Diese Konfiguration konvertiert die ES6-Syntax in die ES5-Syntax, z. B. let und const in var.

Gleichzeitig werden alle async/await-Funktionen auch in die im Polyfill definierte _asyncToGenerator-Funktion konvertiert.

Tatsächlich werden Versprechen verwendet, um die Funktionen asynchroner Funktionen zu implementieren.

Natürlich erfordert diese Funktion beim Ausführen auch die regeneratorRuntime-Funktion. Deshalb habe ich babel-polyfill global eingeführt, um die regeneratorRuntime-Funktion bereitzustellen.

Hinweis: Wenn Ihre Knotenversion sehr hoch ist und async/await nativ unterstützt, können Sie babel-preset-env und babel-polyfill weglassen

Code:

const path = require('path');
const webpack = require('webpack');
const _externals = require('externals-dependencies')

module.exports = {
  entry: {
    app: [
      // 如果polyfill放在这里，打包的时候将不会被external,必须在js里require才能有效external
      // 'babel-polyfill',
      './src/index.js'
    ]
  },
  output: {
    path: path.resolve(__dirname),
    filename: '[name].js'
  },
  resolve: {
    extensions: [".js"]
  },
  target: 'node',
  externals: _externals(),
  context: __dirname,
  node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
  },
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
  ]
}

Bereitstellung

Nach dem Packen ist die Bereitstellung viel bequemer. Sie müssen nur package.json, app.js und den HTML-Code in der Online-Ansicht bereitstellen. Führen Sie dann

1. npm install
2 npm run for

auf dem Server aus und der Server wird dann im Hintergrund ausgeführt. Wenn Sie aktualisieren und veröffentlichen müssen, müssen Sie nur npm run dev oder npm run build lokal neu verpacken und auf den Server ziehen, um app.js zu überschreiben.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So entwickeln Sie Komponentenbibliotheken mit React

Verwenden von fullpage.js zum Implementieren des Scrollens

Electron konnte mit npm nicht installiert werden

Das obige ist der detaillierte Inhalt vonWie verpacke ich die KOA2-Framework-App über Webpack? Was soll ich tun?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!