Ausführliche Erläuterung der Beispiele für Webpack-gepackte Koa2-Framework-Apps

Als ich Koa zum Schreiben von Servern verwendete, war das Veröffentlichen 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. Dieser Artikel stellt Ihnen hauptsächlich die Schritte und die endgültige Bereitstellung des Webpacks zum Packen des koa2-Frameworks vor. Ich hoffe, dass er Ihnen helfen kann.

Hauptprobleme

1: Alle Module in node_modules sind nicht gepackt

Die Kernfunktionen von Webpack It besteht darin, jedes referenzierte Modul in eine Datei einzugeben und verschiedene standardisierte Module zu vereinheitlichen (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. Es ist passiert, dass wir festgestellt haben, dass webapck das externals-Attribut 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 zum Knoten

Offizielle Dokumentation: Zur Klasse kompilieren Die Node.js-Umgebung ist verfügbar (zum Laden des Blocks ist Node.js erforderlich)

Code:

Ziel: 'Knoten',

Drei: Knotenkonfiguration hinzufügen

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

Code:

Knoten: {
Konsole: wahr,
global: wahr,
Prozess: wahr,
Puffer: wahr,
__filename: true,
__dirname: true,
setImmediate: true,
path: true
},

Vier: Babel-Konfiguration

Um mit niedrigeren Versionen des Knotens kompatibel zu sein, wird Async/Await nicht nativ unterstützt. 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.

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, ablehn) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); "); }); }; }

verwendet tatsächlich Versprechen, um die Funktion der asynchronen Funktion zu implementieren.

Natürlich benötigt 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 hinzufügen und die HTML-Bereitstellung anzeigen wird online sein. Führen Sie dann

1. npm install
2 aus. 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.

Verwandte Empfehlungen:

10 empfohlene Artikel über koa2

Teilen Sie Beispiel-Tutorials zur Verwendung des koa2-Frameworks in nodejs

Tutorial zur Verwendung des Koa2-Frameworks in nodejs6

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für Webpack-gepackte Koa2-Framework-Apps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!