Webpack でアプリケーションをバンドルする - AWS SDK for JavaScript
WebpackをインストールしますWebpack の設定Webpack を実行するWebpack バンドルを使用するNode.js のバンドル

AWS SDK for JavaScript V3 API リファレンスガイドでは、 AWS SDK for JavaScript バージョン3 (V3) のすべての API オペレーションについて詳しく説明します。

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

Webpack でアプリケーションをバンドルする

ブラウザスクリプトまたはNode.jsでWebアプリケーションでコードモジュールを使用すると、依存関係が作成されます。これらのコードモジュールは独自の依存関係を持つことができ、結果として、アプリケーションが機能するために必要な、相互接続されたモジュールの集まりができます。依存関係を管理するには、webpackなどのモジュールバンドラーを使用できます。

webpackモジュールバンドラーはアプリケーションコードを解析して、import または require ステートメントを検索し、アプリケーションに必要なすべてのアセットを含むバンドルを作成します。これは、アセットを Web ページを介して簡単に提供できるようにするためです。の SDK は、出力バンドルに含める依存関係の 1 つwebpackとして に含める JavaScript ことができます。

の詳細についてはwebpack、 の Webpack モジュールバンドラーを参照してください GitHub。

Webpackをインストールします

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 はプロジェクトのルートディレクトリwebpack.config.jsで という名前の JavaScript ファイルを検索します。このファイルは、設定オプションを指定します。 WebPack バージョン 5.0.0 以降のwebpack.config.js設定ファイルの例を次に示します。

注記

Webpackの設定要件は、インストールする Webpack のバージョンによって異なります。詳細については、Webpack documentation（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"}]
  }
  **/
};

この例では、 entry point（エントリポイント）としてbrowser.js が指定されます。entry point（エントリポイント）は、インポートされたモジュールの検索を開始するために使用するファイルwebpackです。出力のファイル名は bundle.js として指定されます。この出力ファイルには、 JavaScript アプリケーションの実行に必要なすべての が含まれます。エントリポイントで指定されたコードが SDK for などの他のモジュールをインポートまたは必要とする場合 JavaScript、そのコードは設定で指定することなくバンドルされます。

Webpack を実行する

アプリケーションがwebpackを使用するように設定するには、package.jsonファイル内のscriptsオブジェクトに以下を追加します。

"build": "webpack"

以下は、webpackの追加を示すpackage.jsonファイルの例です。

{
  "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 ファイルを生成します。

Webpack バンドルを使用する

ブラウザスクリプトでバンドルを使用するには、次の例で示すように <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 のバンドル

設定でターゲットとしてnodeを指定することにより、Node.jsで実行されるバンドルを生成するためにwebpackを使用できます。

target: "node"

これは、ディスク容量に制限がある環境で Node.js アプリケーションを実行するときに役立ちます。出力ターゲットとして指定された Node.js を使用した 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'
  },
  // 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"}]
  }
  **/
};