La Guía de referencia de la API de AWS SDK for JavaScript V3 describe en detalle todas las operaciones de la API para la versión 3 (V3) de AWS SDK for JavaScript.

Agrupación de aplicaciones con Webpack

El uso de módulos de código por parte de aplicaciones web en scripts de navegador o Node.js crea dependencias. Estos módulos de código pueden tener dependencias propias, lo que se traduce en una colección de módulos interconectados que su aplicación necesita para funcionar. Para administrar dependencias, puede utilizar un instalador de módulos como Webpack.

El instalador de módulos Webpack analiza el código de la aplicación para buscar instrucciones import o require y crear agrupaciones que contengan todos los recursos que la aplicación necesita. Esto es para que los activos se puedan servir fácilmente a través de una página web. El SDK para JavaScript se puede incluir en Webpack como una de las dependencias que se deben incluir en el paquete de salida.

Para obtener más información acerca de Webpack, consulte el instalador de módulos Webpack en GitHub.

Instalación de Webpack

Para instalar el instalador de módulos Webpack, en primer lugar debe tener npm, el administrador de paquetes de Node.js, instalado. Escriba el comando siguiente para instalar CLI de Webpack y el módulo JavaScript.

npm install --save-dev webpack

Para usar el módulo path para trabajar con rutas de archivos y directorios, que se instala automáticamente con Webpack, es posible que necesite instalar el paquete path-browserify de Node.js.

npm install --save-dev path-browserify

Configuración de Webpack

De forma predeterminada, Webpack busca un archivo de JavaScript llamado webpack.config.js en el directorio raíz del proyecto. Este archivo especifica sus opciones de configuración. El siguiente es un ejemplo de un archivo de configuración webpack.config.js para la versión 5.0.0 y posteriores de WebPack.

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

En este ejemplo, browser.js se especifica como el punto de entrada. El punto de entrada es el archivo que Webpack utiliza para comenzar a buscar módulos importados. El nombre de archivo de la salida se especifica como bundle.js. Este archivo de salida contendrá todo el JavaScript que la aplicación necesita ejecutar. Si el código especificado en el punto de entrada importa o requiere otros módulos como, por ejemplo, el SDK para JavaScript, dicho código se empaqueta sin necesidad de especificarlo en la configuración.

Ejecución de Webpack

Para desarrollar una aplicación para utilizar Webpack, añada lo siguiente al objeto scripts de su archivo package.json.

"build": "webpack"

El siguiente es un archivo package.json de ejemplo que muestra cómo agregar 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/client-iam": "^3.32.0",
    "@aws-sdk/client-s3": "^3.32.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}

Para compilar su aplicación, introduzca el comando siguiente.

npm run build

Luego, el instalador del módulo Webpack genera el archivo JavaScript que ha especificado en el directorio raíz del proyecto.

Uso de la agrupación de Webpack

Para utilizar la agrupación en un script de navegador, puede incorporar la agrupación con una etiqueta <script>, tal y como se muestra en el siguiente ejemplo.

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

Agrupación para Node.js

Puede utilizar Webpack para generar agrupaciones que se ejecutan en Node.js especificando node como destino en la configuración.

target: "node"

Esto resulta útil al ejecutar una aplicación de Node.js en un entorno donde el espacio en el disco es limitado. A continuación se muestra un ejemplo de configuración de webpack.config.js con Node.js especificado como destino de salida.

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