Anunciamos o próximo fim do suporte para o AWS SDK for JavaScript v2. Recomendamos migrar para o AWS SDK for JavaScript v3. Para saber as datas e receber detalhes adicionais e informações sobre como migrar, consulte o anúncio vinculado.

Empacotamento de aplicativos com o Webpack

Os aplicativos web nos scripts do navegador ou o uso pelo Node.js dos módulos do código criam dependências. Esses módulos de código podem ter dependências próprias, o que resulta em uma coleção de módulos interligados que seu aplicativo exige para funcionar. Para gerenciar dependências, você pode usar um agrupador de módulos, como Webpack.

O agrupador de módulos Webpack analisa o código do seu aplicativo, procurando por instruções import ou require, para criar pacotes que contenham todos os ativos de que o seu aplicativo precisa para que os ativos sejam facilmente apresentados em uma página da web. O SDK para JavaScript pode ser incluído no Webpack como uma das dependências para incluir no pacote de saída.

Para obter mais informações sobre o Webpack, consulte o módulo do agrupador de módulos Webpack no GitHub.

Instalar o Webpack

Para instalar o agrupador de módulos Webpack, primeiro você deve instalar o npm, o gerenciador de pacotes do Node.js. Digite o comando a seguir para instalar a CLI do Webpack e o módulo do JavaScript.

npm install webpack

Pode ser necessário também instalar um plugin do Webpack que permita o carregamento de arquivos JSON. Digite o comando a seguir para instalar o plug-in do carregador JSON.

npm install json-loader

Configurar o Webpack

Por padrão, o Webpack busca por um arquivo JavaScript chamado webpack.config.js no diretório raiz do projeto. Esse arquivo especifica as opções de configuração. Eis um exemplo de um arquivo de configuração do 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']
      }
    ]
  }
}

Neste exemplo, browser.js é especificado como ponto de entrada. O ponto de entrada é o arquivo que o webpack usa para iniciar a pesquisa por módulos importados. O nome do arquivo da saída é especificado como bundle.js. Esse arquivo de saída conterá tudo do JavaScript de que o aplicativo precisa para ser executado. Se o código especificado no ponto de entrada importar ou exigir outros módulos, como o SDK para JavaScript, esse código será incluído sem a necessidade de especificá-lo na configuração.

A configuração do plugin json-loader que foi instalado anteriormente especifica ao Webpack como importar arquivos JSON. Por padrão, o Webpack só é compatível com JavaScript, mas usa carregadores para adicionar suporte à importação de outros tipos de arquivo. Como o SDK para JavaScript faz amplo uso de arquivos JSON, o Webpack lançará um erro ao gerar o pacote se o json-loader não estiver incluído.

Executar o Webpack

Para criar um aplicativo para usar o Webpack, adicione o seguinte ao objeto scripts no seu arquivo package.json.

"build": "webpack"

Veja a seguir um exemplo de package.json que demonstra a adição do 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 criar seu aplicativo, digite o comando a seguir.

npm run build

O agrupador de módulos Webpack gera o arquivo JavaScript que você especificou no diretório raiz do projeto.

Usar o pacote Webpack

Para usar o pacote no script de um navegador, você pode incorporar o pacote usando uma tag <script>, conforme mostrado no exemplo a seguir.

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

Importar serviços individuais

Um dos benefícios do Webpack é que ele analisa as dependências do seu código e agrupa somente o código de que seu aplicativo precisa. Se você estiver usando o SDK para JavaScript, agrupar apenas as partes do SDK de fato usadas pelo seu aplicativo pode reduzir consideravelmente o tamanho da saída do Webpack.

Considere o seguinte exemplo do código usado para criar um objeto de serviço do 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'});

A função require() especifica o SDK inteiro. Um pacote do Webpack gerado com esse código incluiria todo o SDK, mas nem todo o SDK é necessário quando somente a classe de cliente Amazon S3 é usada. O tamanho do pacote seria substancialmente menor se apenas a parte do SDK de que você precisa para o serviço do Amazon S3 fosse incluída. Nem a configuração exige todo o SDK, pois você pode definir os dados de configuração no objeto de serviço do Amazon S3.

Aqui está o mesmo código quando inclui somente a parte do Amazon S3 do 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}
  });

Empacotamento para o Node.js

Você pode usar o Webpack para gerar pacotes executados no Node.js ao especificá-los como destino na configuração.

target: "node"

Isso é útil ao executar um aplicativo do Node.js em um ambiente no qual o espaço em disco é limitado. Aqui está um exemplo de configuração do webpack.config.js com o Node.js especificado como o destino de saída.

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