Le guide de référence de l'API AWS SDK for JavaScript V3 décrit en détail toutes les opérations de l'API pour la AWS SDK for JavaScript version 3 (V3).

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.

Regroupez des applications avec Webpack

L'utilisation de modules de code par des applications Web dans des scripts de navigateur ou dans Node.js crée 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 les dépendances, vous pouvez utiliser un bundler de modules tel quewebpack.

Le webpack module bundler analyse le code de votre application, à la recherche d'requireinstructions import ou d'instructions, pour créer des ensembles contenant tous les actifs dont votre application a besoin. Cela permet de diffuser facilement les actifs via une page Web. Le SDK pour JavaScript peut être inclus webpack comme l'une des dépendances à inclure dans le bundle de sortie.

Pour plus d'informations surwebpack, consultez le bundler du module Webpack sur. GitHub

Installer webpack

Pour installer le bundler de webpack modules, vous devez d'abord installer npm, le gestionnaire de packages Node.js. Tapez la commande suivante pour installer la webpack CLI et le JavaScript module.

npm install --save-dev webpack

Pour utiliser le path module permettant de travailler avec les chemins de fichiers et de répertoires, qui est installé automatiquement avec Webpack, vous devrez peut-être installer le path-browserify package Node.js.

npm install --save-dev path-browserify

Configurer le webpack

Par défaut, Webpack recherche un JavaScript fichier 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 webpack.config.js configuration pour les WebPack versions 5.0.0 et ultérieures.

// 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"}]
  }
  **/
};

Dans cet exemple, browser.js est spécifié comme point d'entrée. Le point d'entrée est le fichier webpack utilisé pour commencer à rechercher les modules importés. Le nom de fichier de la sortie est spécifié en tant que bundle.js. Ce fichier de sortie contiendra tout ce dont JavaScript l'application a besoin pour fonctionner. Si le code spécifié dans le point d'entrée importe ou nécessite d'autres modules, tels que le SDK pour JavaScript, ce code est groupé sans qu'il soit nécessaire de le spécifier dans la configuration.

Exécuter le webpack

Pour créer une application à utiliserwebpack, ajoutez ce qui suit à l'scriptsobjet de votre package.json fichier.

"build": "webpack"

Voici un exemple de package.json fichier illustrant l'ajoutwebpack.

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

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

npm run build

Le webpack module bundler génère ensuite le JavaScript fichier que vous avez spécifié dans le répertoire racine de votre projet.

Utiliser le bundle Webpack

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

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

Bundle pour Node.js

Vous pouvez l'utiliser webpack pour générer des bundles qui s'exécutent dans Node.js en les spécifiant node 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, "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"}]
  }
  **/
};