捆綁應用程序與網絡包 - AWS SDK for JavaScript
安裝網絡包配置網絡包運行網絡包使用網絡包包Node.js 的套件組合

AWS SDK for JavaScript V3 參API考指南詳細描述了 AWS SDK for JavaScript 版本 3（V3）的所有API操作。

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

捆綁應用程序與網絡包

在瀏覽器腳本或 Node.js 中使用 Web 應用程序的代碼模塊創建依賴關係。這些程式碼模組可能會擁有自己的依存項目，成為一組您的應用程式運作所需的互連模組。要管理依賴關係，您可以使用類似webpack的模塊捆綁器。

webpack模塊捆綁器解析您的應用程序代碼，搜索import或require語句，以創建包含應用程序需要的所有資產的包。這樣可以通過網頁輕鬆提供資產。的 SDK JavaScript 可webpack作為要包含在輸出服務包中的其中一個依賴項。

如需詳細資訊webpack，請參閱上的 webpack 模組捆綁器。 GitHub

安裝網絡包

要安裝webpack模塊捆綁器，您必須先安裝 npm，Node.js 包管理器。鍵入以下命令以安裝 webpack CLI 和 JavaScript 模塊。

npm install --save-dev webpack

要使用該path模塊來處理文件和目錄路徑，這是與 webpack 自動安裝，你可能需要安裝 Node.js path-browserify 包。

npm install --save-dev path-browserify

配置網絡包

默認情況下，Webpack 會搜索項目根目錄webpack.config.js中名為的 JavaScript 文件。此檔案能夠指定組態選項。以下是 5.0.0 版及更新 WebPack 版本的webpack.config.js組態檔範例。

注意

Webpack 的配置需求根據您安裝的 Webpack 的版本而有所不同。如需詳細資訊，請參閱 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"}]
  }
  **/
};

在此範例中browser.js，指定為入口點。進入點是webpack用來開始搜尋匯入模組的檔案。系統會指定輸出檔案名稱為 bundle.js，該輸出文件將包含所有需要運行 JavaScript 的應用程序。如果進入點中指定的程式碼匯入或需要其他模組 (例如 SDK) JavaScript，則該程式碼會隨附而不需要在組態中指定。

運行網絡包

要構建要使用的應用程序webpack，請將以下內容添加到package.json文scripts件中的對象中。

"build": "webpack"

以下是示範新增的範例package.json檔案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/client-iam": "^3.32.0",
    "@aws-sdk/client-s3": "^3.32.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}

若要建立您的應用程式，請輸入下列命令。

npm run build

然後，webpack模塊捆綁器生成您在項目根目錄中指定的 JavaScript 文件。

使用網絡包包

若要在瀏覽器指令碼中使用套裝軟體，您可以使用<script>標籤來合併套裝軟體，如下列範例所示。

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

Node.js 的套件組合

您可webpack以在組態中指定node為目標，來產生在 Node.js 中執行的套裝軟體。

target: "node"

當您在磁碟空間有限的環境中執行 Node.js 應用程式時，這個做法十分實用。下方為 webpack.config.js 組態範例，而該組態會將 Node.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'
  },
  // 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"}]
  }
  **/
};