Création d'une offre groupée d'applications avec Webpack - AWS SDK for JavaScript
Installation de WebpackConfiguration de WebpackExécution de WebpackUtilisation de la solution groupée WebpackImportation de services individuelsCréation d'une offre groupée pour Node.js

Nous avons annoncé la sortie end-of-support de la AWS SDK for JavaScript v2. Nous vous recommandons de migrer vers la AWS SDK for JavaScript version 3. Pour les dates, les détails supplémentaires et les informations sur la façon de migrer, reportez-vous à l'annonce associée.

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Création d'une offre groupée d'applications avec Webpack

Les applications web des scripts de navigateur ou l'utilisation dans Node.js des modules de code créent des dépendances. Ces modules de code peuvent avoir leurs propres dépendances, ce qui se traduit par un ensemble de modules interconnectés nécessaires à votre application pour fonctionner. Pour gérer des dépendances, vous pouvez utiliser un créateur d'offre groupée de modules comme Webpack.

Le créateur d'offre groupée de modules Webpack analyse votre code d'application, en recherchant des instructions require ou import pour créer des solutions groupées contenant toutes les ressources nécessaires à votre application, afin que les ressources puissent facilement être diffusées via une page web. Le kit SDK pour JavaScript peut être inclus dans Webpack comme l'une des dépendances à inclure dans la création groupée de sortie.

Pour plus d'informations sur Webpack, consultez le créateur d'offre groupée de modules Webpack sur GitHub.

Installation de Webpack

Pour installer le créateur d'offre groupée de modules Webpack, vous devez tout d'abord installer npm, le gestionnaire de package Node.js. Saisissez la commande suivante pour installer l'interface de ligne de commande Webpack et le module JavaScript.

npm install webpack

Il se peut également que vous deviez installer un plug-in Webpack pour pouvoir charger les fichiers JSON. Saisissez la commande suivante pour installer le plug-in de chargeur JSON.

npm install json-loader

Configuration de Webpack

Par défaut, Webpack recherche un fichier JavaScript nommé webpack.config.js dans le répertoire racine de votre projet. Ce fichier spécifie vos options de configuration. Voici un exemple de fichier de configuration webpack.config.js.

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

Dans cet exemple, browser.js est spécifié comme le point d'entrée. Le point d'entrée est le fichier que Webpack utilise pour rechercher des modules importés. Le nom de fichier de la sortie est spécifié en tant que bundle.js. Ce fichier de sortie contient tout le code JavaScript nécessaire à l'application pour s'exécuter. Si le code spécifié dans le point d'entrée importe ou nécessite d'autres modules, tels que le kit SDK pour JavaScript, ce code est regroupé sans que vous ayez besoin de le spécifier dans la configuration.

La configuration installée auparavant dans le plug-in json-loader indique à Webpack comment importer des fichiers JSON. Par défaut, Webpack prend uniquement en charge JavaScript, mais utilise des chargeurs pour ajouter la prise en charge de l'importation d'autres types de fichiers. Webpack génère une erreur lors de la génération de la création d'une offre groupée si le kit SDK pour JavaScript fait un usage approfondi des fichiers JSON.json-loadern'est pas inclus.

Exécution de Webpack

Pour créer une application permettant d'utiliser Webpack, ajoutez les éléments suivants à l'objet scripts dans votre fichier package.json.

"build": "webpack"

Voici un exemple package.json qui illustre l'ajout de Webpack.

{
  "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"
  }
}

Pour créer votre application, saisissez la commande suivante.

npm run build

Ensuite, le créateur d'offre groupée de modules Webpack génère le fichier JavaScript spécifié dans le répertoire racine de votre projet.

Utilisation de la solution groupée Webpack

Pour utiliser la solution groupée dans un script de navigateur, vous pouvez l'intégrer à l'aide d'une balise <script> comme illustré dans l'exemple suivant.

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

Importation de services individuels

Webpack a l'avantage d'analyser les dépendances de votre code et de regrouper uniquement le code nécessaire à votre application. Si vous utilisez le kit SDK pour JavaScript, seule la création d'une offre groupée des parties du kit SDK réellement utilisées par votre application peut réduire considérablement la taille de la sortie Webpack.

Prenons l'exemple de code suivant utilisé pour créer un objet de service Amazon S3.

// 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'});

La fonction require() spécifie le kit SDK entier. Un kit groupé Webpack généré avec ce code comprend le kit SDK entier, mais ce dernier n'est pas obligatoire lorsque seule la classe client Amazon S3 est utilisée. La taille de la création groupée est nettement inférieure si seule la partie du kit SDK nécessaire au service Amazon S3 est incluse. Il en est de même pour la définition de la configuration qui n'a pas besoin du kit SDK entier, car vous pour définir les données de configuration sur l'objet de service Amazon S3.

Voici à quoi ressemble le même code lorsqu'il comprend uniquement la partie Amazon S3 du kit SDK.

// 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}
  });

Création d'une offre groupée pour Node.js

Vous pouvez utiliser Webpack pour générer des solutions groupées qui s'exécutent dans Node.js en le spécifiant comme cible dans la configuration.

target: "node"

Cela s'avère utile lors de l'exécution d'une application Node.js dans un environnement où l'espace disque est limité. Voici un exemple de configuration webpack.config.js avec Node.js spécifié comme cible de sortie.

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