Raggruppamento di applicazioni mediante webpack - AWS SDK for JavaScript
Installazione di webpackConfigurazione di webpackEsecuzione di webpackUtilizzo del bundle di webpackImportazione di singoli serviziRaggruppamento per Node.js

Abbiamo annunciato l'imminente uscita end-of-support per la AWS SDK for JavaScript v2. Ti consigliamo di migrare alla AWS SDK for JavaScript v3. Per date, dettagli aggiuntivi e informazioni su come effettuare la migrazione, consulta l'annuncio collegato.

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Raggruppamento di applicazioni mediante webpack

Le applicazioni Web negli script del browser o l'utilizzo da parte di Node.js dei moduli di codice crea dipendenze. Questi moduli di codice possono avere dipendenze proprie, generando una raccolta di moduli interconnessi richiesti dall'applicazione per funzionare. Per gestire le dipendenze, puoi utilizzare un module bundler come webpack.

Il module bundler webpack analizza il codice dell'applicazione, cercando le istruzioni import o require, per creare pacchetti che contengano tutti gli asset di cui l'applicazione ha bisogno affinché gli asset possano essere facilmente forniti attraverso una pagina Web. L'SDK per JavaScript può essere incluso in webpack come una delle dipendenze da includere nel pacchetto di output.

Per ulteriori informazioni su webpack, consulta il module bundler webpack su GitHub.

Installazione di webpack

Per installare il module bundler webpack, devi installare prima npm, il gestore di pacchetti Node.js. Digita il comando seguente per installare il modulo JavaScript e l'interfaccia a riga di comando di webpack.

npm install webpack

Potrebbe anche essere necessario installare un plugin di webpack che consente di caricare i file JSON. Digita il comando seguente per installare il plugin per il caricamento di file JSON.

npm install json-loader

Configurazione di webpack

Per impostazione predefinita, webpack ricerca un file JavaScript denominato webpack.config.js nella directory principale del tuo progetto. Questo file specifica le opzioni di configurazione. Ecco un esempio di file di configurazione 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']
      }
    ]
  }
}

In questo esempio, è specificato browser.js come punto di ingresso. Il punto di ingresso è il file utilizzato da webpack per avviare la ricerca dei moduli importati. Come bundle.js è specificato il nome del file di output. Questo file di output conterrà tutti i JavaScript che l'applicazione deve eseguire. Se il codice specificato nel punto di ingresso importa o richiede altri moduli, ad esempio l'SDK per JavaScript, tale codice viene fornito senza necessità di specificarlo nella configurazione.

La configurazione nel plugin json-loader che è stato installato in precedenza specifica a webpack come importare i file JSON. Per impostazione predefinita, webpack supporta solo JavaScript, ma utilizza loader per aggiungere il supporto per l'importazione di altri tipi di file. Poiché l'SDK per JavaScript fa ampio uso dei file JSON, webpack genera un errore durante la generazione del pacchetto sejson-loadernon è incluso.

Esecuzione di webpack

Per creare un'applicazione per l'utilizzo di webpack, aggiungi il codice seguente all'oggetto scripts nel tuo file package.json.

"build": "webpack"

Ecco un esempio di package.json che mostra l'aggiunta di 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"
  }
}

Per creare l'applicazione, digita il comando riportato di seguito.

npm run build

Il module bundler webpack genera quindi il file JavaScript specificato nella directory principale del tuo progetto.

Utilizzo del bundle di webpack

Per utilizzare il bundle in uno script del browser, puoi incorporare il bundle utilizzando un tag <script> come mostrato nel seguente esempio.

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

Importazione di singoli servizi

Uno dei vantaggi di webpack è che analizza le dipendenze nel tuo codice e raggruppa solo il codice richiesto dalla tua applicazione. Se stai utilizzando l'SDK per JavaScript, il raggruppamento delle sole parti dell'SDK effettivamente utilizzate dalla tua applicazione può ridurre notevolmente le dimensioni dell'output di webpack.

Considera il seguente esempio di codice utilizzato per creare un oggetto di servizio 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 funzione require() specifica l'intero SDK. Un bundle di webpack generato con questo codice includerebbe l'intero SDK, ma non è richiesto l'intero SDK quando viene utilizzata solo la classe client Amazon S3. La dimensione del bundle sarebbe sostanzialmente inferiore se fosse inclusa solo la parte dell'SDK richiesta per il servizio Amazon S3. Anche l'impostazione della configurazione non richiede l'intero SDK perché è possibile impostare i dati di configurazione sull'oggetto di servizio Amazon S3.

Ecco come appare lo stesso codice quando include solo la porzione Amazon S3 dell'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}
  });

Raggruppamento per Node.js

Puoi utilizzare webpack per generare bundle eseguiti in Node.js specificandolo come destinazione nella configurazione.

target: "node"

Questa funzione è utile quando si esegue un'applicazione Node.js in un ambiente in cui lo spazio su disco è limitato. Ecco un esempio di configurazione webpack.config.js con Node.js specificato come destinazione dell'output.

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