Kami mengumumkan yang akan datang end-of-support untuk AWS SDK for JavaScript v2. Kami menyarankan Anda bermigrasi ke AWS SDK for JavaScript v3. Untuk tanggal, detail tambahan, dan informasi tentang cara bermigrasi, silakan merujuk ke pengumuman tertaut.

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Aplikasi Bundling dengan Webpack

Aplikasi web dalam skrip browser atau Node.js penggunaan modul kode menciptakan dependensi. Modul kode ini dapat memiliki dependensi sendiri, menghasilkan kumpulan modul yang saling berhubungan yang dibutuhkan aplikasi Anda untuk berfungsi. Untuk mengelola dependensi, Anda dapat menggunakan bundler modul seperti webpack.

Bundler modul webpack mem-parsing kode aplikasi Anda, mencariimportataurequirepernyataan, untuk membuat bundel yang berisi semua aset yang dibutuhkan aplikasi Anda sehingga aset dapat dengan mudah disajikan melalui halaman web. SDK untuk JavaScript dapat dimasukkan dalam webpack sebagai salah satu dependensi untuk disertakan dalam bundel output.

Untuk informasi selengkapnya tentang webpack, lihatpaketan moduldi GitHub.

Menginstal Webpack

Untuk menginstal bundler modul webpack, Anda harus terlebih dahulu memiliki npm, manajer paket Node.js, diinstal. Ketik perintah berikut untuk menginstal modul webpack CLI dan JavaScript.

npm install webpack

Anda mungkin juga perlu menginstal plugin webpack yang memungkinkannya memuat file JSON. Ketik perintah berikut untuk menginstal plugin loader JSON.

npm install json-loader

Mengonfigurasi Webpack

Secara default, webpack mencari file JavaScript bernamawebpack.config.jsdi direktori root proyek. File ini menentukan opsi konfigurasi Anda. Berikut ini adalah contoh dariwebpack.config.jsfile konfigurasi.

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

Dalam contoh ini,browser.jsditentukan sebagai titik masuk. Parametertitik masukadalah file webpack menggunakan untuk mulai mencari modul impor. Nama file output ditentukan sebagaibundle.js. File output ini akan berisi semua JavaScript aplikasi perlu dijalankan. Jika kode yang ditentukan dalam impor entry point atau memerlukan modul lain, seperti SDK untuk JavaScript, kode yang dibundel tanpa perlu menentukan dalam konfigurasi.

Konfigurasi dijson-loaderplugin yang telah diinstal sebelumnya menentukan untuk webpack cara mengimpor file JSON. Secara default, webpack hanya mendukung JavaScript tetapi menggunakan loader untuk menambahkan dukungan untuk mengimpor jenis file lainnya. Karena SDK untuk JavaScript memanfaatkan file JSON secara ekstensif, webpack melempar kesalahan saat menghasilkan bundel jikajson-loadertidak termasuk.

Menjalankan Webpack

Untuk membangun aplikasi untuk menggunakan webpack, tambahkan yang berikut kescriptsobjek dipackage.jsonberkas.

"build": "webpack"

Ini contohnyapackage.jsonyang menunjukkan menambahkan 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"
  }
}

Untuk membangun aplikasi Anda, ketik perintah berikut.

npm run build

Paketan modul webpack kemudian menghasilkan file JavaScript yang Anda tentukan di direktori root proyek.

Menggunakan Webpack Bundle

Untuk menggunakan bundel dalam skrip browser, Anda dapat menggabungkan bundel menggunakan<script>tag seperti yang ditunjukkan dalam contoh berikut.

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

Mengimpor Layanan Individu

Salah satu manfaat webpack adalah mem-parsing dependensi dalam kode Anda dan bundel hanya kode yang dibutuhkan aplikasi Anda. Jika Anda menggunakan SDK untuk JavaScript, bundling hanya bagian-bagian SDK yang benar-benar digunakan oleh aplikasi Anda dapat mengurangi ukuran output webpack jauh.

Perhatikan contoh kode berikut yang digunakan untuk membuat objek layanan 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'});

Parameterrequire()fungsi menentukan seluruh SDK. Bundel webpack yang dihasilkan dengan kode ini akan menyertakan SDK penuh tetapi SDK penuh tidak diperlukan bila hanya kelas klien Amazon S3 yang digunakan. Ukuran bundel akan jauh lebih kecil jika hanya porsi SDK yang Anda butuhkan untuk layanan Amazon S3 yang disertakan. Bahkan pengaturan konfigurasi tidak memerlukan SDK penuh karena Anda dapat mengatur data konfigurasi pada objek layanan Amazon S3.

Inilah kode yang sama seperti ketika hanya mencakup bagian Amazon S3 dari 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}
  });

Paketan untuk Node.js

Anda dapat menggunakan webpack untuk menghasilkan bundel yang berjalan di Node.js dengan menentukannya sebagai target dalam konfigurasi.

target: "node"

Hal ini berguna ketika menjalankan aplikasi Node.js di lingkungan di mana ruang disk terbatas. Ini contohnyawebpack.config.jskonfigurasi dengan Node.js ditentukan sebagai target 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']
      }
    ]
  }
}