Wir haben das Kommende end-of-support für AWS SDK for JavaScript v2 angekündigt. Wir empfehlen Ihnen, auf AWS SDK for JavaScript Version 3 zu migrieren. Termine, weitere Details und Informationen zur Migration finden Sie in der verlinkten Ankündigung.

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

Webanwendungen in Browser-Skripts oder die Verwendung von Codemodulen von Node.js erstellt 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 wie Webpack verwenden.

Der Webpack-Modulpacker analysiert den Code Ihrer Anwendung. Dabei sucht er nach import- oder require-Anweisungen, um Pakete zu erstellen, die alle erforderlichen Komponenten für Ihre Anwendung enthalten, damit sie problemlos über eine Webseite bereitgestellt werden können. Das SDK für JavaScript kann als eine der Abhängigkeiten in Webpack einbezogen werden, die im Ausgabepaket eingeschlossen werden sollen.

Weitere Informationen zu Webpack finden Sie auf der Seite zum Webpack-Modulpacker auf GitHub.

Installieren von Webpack

Damit Sie den Webpack-Modulpacker installieren können, müssen Sie zuerst npm, den Node.js-Paketmanager, installieren. Geben Sie den folgenden Befehl ein, um die Webpack-CLI und das JavaScript-Modul zu installieren.

npm install webpack

Möglicherweise müssen Sie auch ein Webpack-Plug-in installieren, um JSON-Dateien laden zu können. Geben Sie den folgenden Befehl ein, um das JSON-Loader-Plug-in zu installieren.

npm install json-loader

Konfigurieren von Webpack

Standardmäßig sucht Webpack nach einer JavaScript-Datei mit dem Namen webpack.config.js im Root-Verzeichnis Ihres Projekts. Diese Datei enthält Ihre Konfigurationsoptionen. Hier finden Sie ein Beispiel für eine webpack.config.js-Konfigurationsdatei.

// 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'
  },
  module: {
    /**
      * Tell webpack how to load 'json' files. 
      * When webpack encounters a 'require()' statement
      * where a 'json' file is being imported, it will use
      * the json-loader.  
      */
    loaders: [
      {
        test: /\.json$/, 
        loaders: ['json']
      }
    ]
  }
}

In diesem Beispiel ist browser.js als Eintrittspunkt angegeben. Der Eintrittspunkt ist die Datei, bei der Webpack die 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 andere 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.

Die Konfiguration im vorher installierten json-loader-Plug-in gibt Webpack an, wie JSON-Dateien importiert werden. Standardmäßig unterstützt Webpack nur JavaScript. Es verwendet jedoch Loader, um Unterstützung für den Import anderer Dateitypen hinzuzufügen. Da das SDK für JavaScript JSON-Dateien umfassend verwendet, gibt Webpack beim Generieren des Pakets einen Fehler aus, wennjson-loaderist nicht enthalten.

Ausführen von Webpack

Zum Erstellen einer Anwendung, die Webpack verwendet, fügen Sie Folgendes zum scripts-Objekt in Ihrer package.json-Datei hinzu.

"build": "webpack"

Hier finden Sie eine beispielhafte package.json-Datei, die zeigt, wie Webpack hinzugefügt wird.

{
  "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": "^2.6.1"
  },
  "devDependencies": {
    "json-loader": "^0.5.4",
    "webpack": "^1.13.2"
  }
}

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

npm run build

Der Webpack-Modulpacker 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>-Tags integrieren, wie im folgenden Beispiel gezeigt.

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

Importieren von einzelnen Services

Einer der Vorteile von Webpack besteht darin, dass es die Abhängigkeiten in Ihrem Code analysiert und nur den für Ihre Anwendung erforderlichen Code bündelt. Wenn Sie das SDK für JavaScript verwenden, kann das Bündeln nur der von Ihrer Anwendung tatsächlich genutzten Teile des SDKs die Größe der Webpack-Ausgabe deutlich reduzieren.

Betrachten Sie das folgende Codebeispiel zum Erstellen eines Amazon S3-Service-Objekts.

// Import the AWS SDK
var AWS = require('aws-sdk');

// Set credentials and Region
// This can also be done directly on the service client
AWS.config.update({region: 'us-west-1', credentials: {YOUR_CREDENTIALS}});

var s3 = new AWS.S3({apiVersion: '2006-03-01'});

Mit der require()-Funktion wird das gesamte SDK angegeben. Ein mit diesem Code generiertes Webpack-Paket umfasst das vollständige SDK. Dieses ist jedoch nicht erforderlich, wenn nur die Amazon S3 S3--Client-Klasse verwendet wird. Die Größe des Pakets ist dann wesentlich kleiner, wenn nur der -Anteil des SDKs aufgenommen wird, der für den Amazon S3-Service erforderlich ist. Auch die Konfiguration erfordert nicht das vollständige SDK, da Sie die Konfigurationsdaten im Amazon S3-Service-Objekt festlegen können.

Nachfolgend sehen Sie, wie derselbe Code aussieht, wenn er nur den Amazon S3-Teil des SDKs enthält.

// Import the Amazon S3 service client
var S3 = require('aws-sdk/clients/s3');
 
// Set credentials and Region
var s3 = new S3({
    apiVersion: '2006-03-01',
    region: 'us-west-1', 
    credentials: {YOUR_CREDENTIALS}
  });

Bündeln für Node.js

Sie können mit Webpack Pakete generieren, die in Node.js ausgeführt werden, indem Sie es als Ziel in der Konfiguration angeben.

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, 'node.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",
  module: {
    /**
      * Tell webpack how to load JSON files.
      * When webpack encounters a 'require()' statement
      * where a JSON file is being imported, it will use
      * the json-loader
      */
    loaders: [
      {
        test: /\.json$/, 
        loaders: ['json']
      }
    ]
  }
}