Bündeln von Anwendungen mit Webpack - AWS SDK for JavaScript

Hilf uns, das zu verbessernAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation, indem Sie Feedback mithilfe derFeedbackverlinken, oder erstellen Sie ein Issue oder Pull Request aufGitHub.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-APIbeschreibt ausführlich alle API-Operationen für denAWS SDK for JavaScriptVersion 3 (V3).

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Bündeln von Anwendungen mit Webpack

Die Verwendung von Codemodulen durch Webanwendungen in Browser-Skripts oder Node.js erzeugt Abhängigkeiten. Diese Codemodule können eigene Abhängigkeiten haben, was zu einer Sammlung von miteinander verbundenen Modulen führt, die Ihre Anwendung benötigt, um zu funktionieren. Zum Verwalten von Abhängigkeiten können Sie einen Modulpacker wiewebpackaus.

Diewebpackmodule bundler analysiert Ihren Anwendungscode und sucht nachimportoderrequire-Anweisungen, um Bundles zu erstellen, die alle Assets enthalten, die Ihre Anwendung benötigt. Dies ist so, dass die Vermögenswerte einfach über eine Webseite bereitgestellt werden können. Das SDK für JavaScript kann inwebpackAls eine der Abhängigkeiten, die in das Ausgabepaket eingeschlossen werden sollen.

Weitere Informationen zuwebpack, finden Sie unterWebpack-Modulpackerauf GitHub:

Installieren von Webpack

So installieren Sie daswebpackModulpacker, müssen Sie zuerst npm, den Paketmanager Node.js, installieren. Geben Sie den folgenden Befehl ein, um daswebpackCLI und JavaScript-Modul.

npm install --save-dev webpack

So verwenden Sie denpathModul zum Arbeiten mit Datei- und Verzeichnispfaden, das automatisch mit Webpack installiert wird, müssen Sie möglicherweise die Node.js installierenpath-browserifyPaket.

npm install --save-dev path-browserify

Konfigurieren von Webpack

Standardmäßig sucht Webpack nach einer JavaScript-Datei mit dem Namenwebpack.config.jsIm Root-Verzeichnis Ihres Projekts. Diese Datei enthält Ihre Konfigurationsoptionen. Im Folgenden wird ein Beispiel fürwebpack.config.jsKonfigurationsdatei für WebPack Version 5.0.0 und höher.

Anmerkung

Die Anforderungen an die Webpack-Konfiguration variieren je nach Version von Webpack, die Sie installieren. Weitere Informationen finden Sie im .Webpack-Dokumentationaus.

// Import path for resolving file paths var path = require("path"); module.exports = { // Specify the entry point for our app. entry: [path.join(__dirname, "browser.js")], // Specify the output file containing our bundled code. output: { path: __dirname, filename: 'bundle.js' }, // Enable WebPack to use the 'path' package. resolve:{ fallback: { path: require.resolve("path-browserify")} } /** * In Webpack version v2.0.0 and earlier, you must tell * webpack how to use "json-loader" to load 'json' files. * To do this Enter 'npm --save-dev install json-loader' at the * command line to install the "json-loader' package, and include the * following entry in your webpack.config.js. * module: { rules: [{test: /\.json$/, use: use: "json-loader"}] } **/ };

In unserem Beispielbrowser.jsist angegeben alsEintrittspunktaus. DieEintrittspunktist die DateiwebpackMit der Suche nach importierten Modulen beginnt. Der Name für die Ausgabedatei ist als bundle.js angegeben. Diese Ausgabedatei enthält den gesamten JavaScript-Code, der für die Ausführung der Anwendung erforderlich ist. Wenn der im Eintrittspunkt angegebene Code weitere Module wie z. B. das SDK für JavaScript importiert oder benötigt, wird dieser Code gebündelt, ohne in der Konfiguration angegeben werden zu müssen.

Ausführen von Webpack

So erstellen Sie eine zu verwendende AnwendungwebpackFügen Sie Folgendes demscriptsObjekt in Ihrempackage.jsonfile.

"build": "webpack"

Im Folgenden wird ein Beispiel gezeigtpackage.jsonDatei, die das Hinzufügen demonstriertwebpackaus.

{ "name": "aws-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "dependencies": { "@aws-sdk/client-iam": "^3.32.0", "@aws-sdk/client-s3": "^3.32.0" }, "devDependencies": { "webpack": "^5.0.0" } }

Geben Sie den folgenden Befehl ein, um Ihre Anwendung zu erstellen.

npm run build

DiewebpackModulpacker generiert dann die JavaScript-Datei, die Sie im Root-Verzeichnis Ihres Projekts angegeben haben.

Verwenden des Webpack-Pakets

Um das Paket in einem Browser-Skript zu verwenden, können Sie es mithilfe eines<script>-Tag, wie im folgenden Beispiel gezeigt.

<!DOCTYPE html> <html> <head> <title>Amazon SDK with webpack</title> </head> <body> <div id="list"></div> <script src="bundle.js"></script> </body> </html>

Bündeln für Node.js

Sie können es verwendenwebpackSo generieren Sie Pakete, die in Node.js ausgeführt werden, indem Sie angebennodeals Ziel in der Konfiguration.

target: "node"

Dies ist nützlich, wenn eine Node.js-Anwendung in einer Umgebung ausgeführt wird, in der Speicherplatz begrenzt ist. Hier sehen Sie ein Beispiel für eine webpack.config.js-Konfiguration mit der Angabe von Node.js als Ausgabeziel.

// Import path for resolving file paths var path = require("path"); module.exports = { // Specify the entry point for our app. entry: [path.join(__dirname, "browser.js")], // Specify the output file containing our bundled code. output: { path: __dirname, filename: 'bundle.js' }, // Let webpack know to generate a Node.js bundle. target: "node", // Enable WebPack to use the 'path' package. resolve:{ fallback: { path: require.resolve("path-browserify")} /** * In Webpack version v2.0.0 and earlier, you must tell * webpack how to use "json-loader" to load 'json' files. * To do this Enter 'npm --save-dev install json-loader' at the * command line to install the "json-loader' package, and include the * following entry in your webpack.config.js. module: { rules: [{test: /\.json$/, use: use: "json-loader"}] } **/ };