Bundel aplikasi dengan webpack - AWS SDK for JavaScript
Instal webpackKonfigurasikan webpackJalankan webpackGunakan bundel webpackBundel untuk Node.js

Panduan API Referensi AWS SDK for JavaScript V3 menjelaskan secara rinci semua API operasi untuk AWS SDK for JavaScript versi 3 (V3).

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

Bundel aplikasi dengan webpack

Penggunaan modul kode oleh aplikasi web dalam skrip browser atau Node.js 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

webpackModul bundler mem-parsing kode aplikasi Anda, mencari import atau require pernyataan, untuk membuat bundel yang berisi semua aset yang dibutuhkan aplikasi Anda. Ini agar aset dapat dengan mudah dilayani melalui halaman web. SDK for JavaScript dapat dimasukkan webpack sebagai salah satu dependensi untuk disertakan dalam bundel keluaran.

Untuk informasi selengkapnyawebpack, lihat bundler modul webpack aktif. GitHub

Instal webpack

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

npm install --save-dev webpack

Untuk menggunakan path modul untuk bekerja dengan jalur file dan direktori, yang diinstal secara otomatis dengan webpack, Anda mungkin perlu menginstal path-browserify paket Node.js. 

npm install --save-dev path-browserify

Konfigurasikan webpack

Secara default, Webpack mencari JavaScript file bernama webpack.config.js di direktori root proyek Anda. File ini menentukan opsi konfigurasi Anda. Berikut ini adalah contoh file webpack.config.js konfigurasi untuk WebPack versi 5.0.0 dan yang lebih baru.

catatan

Persyaratan konfigurasi webpack bervariasi tergantung pada versi Webpack yang Anda instal. Untuk informasi selengkapnya, lihat dokumentasi 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"}]
  }
  **/
};

Dalam contoh ini, browser.js ditentukan sebagai titik masuk. Titik masuk adalah file yang webpack digunakan untuk mulai mencari modul yang diimpor. Nama file output ditentukan sebagaibundle.js. File output ini akan berisi semua aplikasi JavaScript yang perlu dijalankan. Jika kode yang ditentukan di titik masuk mengimpor atau memerlukan modul lain, seperti SDK for JavaScript, kode tersebut dibundel tanpa perlu menentukannya dalam konfigurasi.

Jalankan webpack

Untuk membangun aplikasi yang akan digunakanwebpack, tambahkan berikut ini ke scripts objek dalam package.json file Anda.

"build": "webpack"

Berikut ini adalah contoh package.json file yang menunjukkan penambahanwebpack.

{
  "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"
  }
}

Untuk membangun aplikasi Anda, masukkan perintah berikut.

npm run build

webpackModul bundler kemudian menghasilkan JavaScript file yang Anda tentukan di direktori root proyek Anda.

Gunakan bundel webpack

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

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

Bundel untuk Node.js

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

target: "node"

Ini berguna saat menjalankan aplikasi Node.js di lingkungan di mana ruang disk terbatas. Berikut adalah contoh webpack.config.js konfigurasi 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, "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"}]
  }
  **/
};