Anunciamos el próximo fin del soporte para AWS SDK for JavaScript v2. Se recomienda que migre a AWS SDK for JavaScript v3. Para ver las fechas, los detalles adicionales y la información sobre cómo realizar la migración, consulte el anuncio enlazado.

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, para que los recursos se puedan servir fácilmente a través de la 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 la interfaz de línea de comandos (CLI) de Webpack y el módulo JavaScript.

npm install webpack

Puede que también tenga que instalar un complemento de Webpack que le permita cargar archivos JSON. Escriba el comando siguiente para instalar el complemento del cargador de JSON.

npm install json-loader

Configuración de Webpack

De forma predeterminada, Webpack busca un archivo de JavaScript denominado webpack.config.js en el directorio raíz del proyecto. Este archivo especifica sus opciones de configuración. A continuación se muestra un ejemplo de un archivo de configuración 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']
      }
    ]
  }
}

En este ejemplo, browser.js se especifica como 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 solicita otros módulos como, por ejemplo, el SDK para JavaScript, dicho código se empaqueta sin necesidad de especificarlo en la configuración.

La configuración que hay en el complemento json-loader que se ha instalado anteriormente especifica a Webpack cómo importar archivos JSON. De forma predeterminada, Webpack solo es compatible con JavaScript, pero utiliza cargadores para añadir soporte para importar otros tipos de archivos. Dado que el SDK para JavaScript usa archivos JSON intensivamente, webpack da un error al generar el paquete si json-loader no está incluido.

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"

A continuación se muestra package.json de ejemplo que demuestra cómo añadir 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"
  }
}

Para compilar su aplicación, escriba 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 del grupo de Webpack

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

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

Importación de servicios individuales

Uno de los beneficios de Webpack es que analiza las dependencias de su código y agrupa únicamente el código que su aplicación necesita. Si está utilizando el SDK para JavaScript, agrupando solo las partes del SDK que la aplicación usa realmente, puede reducir considerablemente el tamaño de la salida de webpack.

Observe el siguiente ejemplo del código que se utiliza para crear un objeto de servicio de 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 función require() especifica todo el SDK. Un paquete webpack que se haya generado con este código incluirá el SDK completo, pero este no es necesario cuando solo se utiliza la clase de cliente de Amazon S3. El tamaño del paquete será considerablemente más pequeño si solo se incluye la parte del SDK que necesita para el servicio de Amazon S3. Incluso establecer la configuración no requiere el SDK completo, ya que puede establecer los datos de la configuración en el objeto de servicio de Amazon S3.

A continuación, se muestra cómo se ve este mismo código cuando se incluye solo la parte de Amazon S3 del 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}
  });

Agrupación para Node.js

Puede utilizar Webpack para generar paquetes que se ejecutan en Node.js especificándolo 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, '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']
      }
    ]
  }
}