

Die AWS SDK für JavaScript Version 2 ist erreicht end-of-support. Wir empfehlen Ihnen, auf [AWS SDK für JavaScript Version 3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/) zu migrieren. Weitere Einzelheiten und Informationen zur Migration finden Sie in dieser [Ankündigung](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).

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
<a name="webpack"></a>

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, die in das Ausgabepaket aufgenommen werden sollen, in das Webpack aufgenommen werden.

Weitere Informationen zu Webpack finden Sie im [Webpack-Modul-Bundler](https://webpack.github.io/) unter. GitHub

## Installieren von Webpack
<a name="webpack-installing"></a>

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
<a name="webpack-configuring"></a>

Standardmäßig sucht Webpack nach einer JavaScript Datei mit dem Namen `webpack.config.js` im Stammverzeichnis 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 alles, was JavaScript die Anwendung zum Ausführen benötigt. Wenn der im Einstiegspunkt angegebene Code andere Module importiert oder benötigt, z. B. das SDK für JavaScript, wird dieser Code gebündelt, ohne dass er in der Konfiguration angegeben werden muss.

Die Konfiguration im vorher installierten `json-loader`-Plug-in gibt Webpack an, wie JSON-Dateien importiert werden. Standardmäßig unterstützt Webpack nur Loader, verwendet diese JavaScript jedoch, um Unterstützung für den Import anderer Dateitypen hinzuzufügen. Da das SDK für JSON-Dateien in großem Umfang verwendet, JavaScript gibt Webpack beim Generieren des Bundles einen Fehler aus, wenn es nicht `json-loader` enthalten ist.

## Ausführen von Webpack
<a name="webpack-running"></a>

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-Modul-Bundler generiert dann die JavaScript Datei, die Sie im Stammverzeichnis Ihres Projekts angegeben haben.

## Verwenden des Webpack-Pakets
<a name="webpack-using-bundle"></a>

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
<a name="webpack-importing-services"></a>

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 verwenden JavaScript, kann das Bündeln nur der Teile des SDK, die tatsächlich von Ihrer Anwendung verwendet werden, die Größe der Webpack-Ausgabe erheblich reduzieren.

Betrachten Sie das folgende Beispiel für den Code, der zur Erstellung eines Amazon S3-Serviceobjekts verwendet wurde.

```
// 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-Bundle würde das vollständige SDK enthalten, aber das vollständige SDK ist nicht erforderlich, wenn nur die Amazon S3 S3-Clientklasse verwendet wird. Die Größe des Pakets wäre erheblich kleiner, wenn nur der Teil des SDK enthalten wäre, den Sie für den Amazon S3 S3-Service benötigen. Selbst für die Einstellung der Konfiguration ist nicht das vollständige SDK erforderlich, da Sie die Konfigurationsdaten für das Amazon S3-Serviceobjekt festlegen können.

So sieht derselbe Code aus, wenn er nur den Amazon S3 S3-Teil des SDK 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
<a name="webpack-nodejs-bundles"></a>

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']
      }
    ]
  }
}
```