AWS SDK for JavaScript v2 はサポート終了となりました。[AWS SDK for JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/) に移行することをお勧めします。その他の詳細、移行方法については、こちらの[発表内容](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/)を参照してください。
# Webpack によるアプリケーションのバンドル
ブラウザスクリプト内のウェブアプリケーションまたは Node.js がコードモジュールを使用すると、依存関係が生じます。これらのコードモジュールは独自の依存関係を持つことができ、結果として、アプリケーションが機能するために必要な、相互接続されたモジュールの集まりができます。依存関係を管理するには、webpack などのモジュールバンドラーを使用できます。
Webpack モジュールバンドラーはアプリケーションコードを解析して、`import` または `require` ステートメントを検索し、アプリケーションに必要なすべてのアセットを含むバンドルを作成します。これにより、アセットがウェブページから簡単に提供されるようにできます。SDK for JavaScript は、出力バンドルに含める依存関係の 1 つとして webpack に含めることができます。
Webpack の詳細については、GitHub の [Webpack モジュールバンドラー](https://webpack.github.io/)を参照してください。
## Webpack のインストール
Webpack モジュールバンドラーをインストールするには、まず npm (Node.js パッケージマネージャー) がインストールされている必要があります。Webpack CLI および JavaScript モジュールをインストールするには、次のコマンドを入力します。
```
npm install webpack
```
必要に応じて、webpack プラグインをインストールします。これにより、JSON ファイルがロードできるようになります。JSON ローダープラグインをインストールするには、次のコマンドを入力します。
```
npm install json-loader
```
## Webpack の設定
デフォルトで、webpack はプロジェクトのルートディレクトリにある `webpack.config.js` という名前の JavaScript ファイルを検索します。このファイルは、設定オプションを指定します。`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']
}
]
}
}
```
この例では、エントリポイントとして `browser.js` が指定されます。*エントリポイント*は、インポートされたモジュールの検索を開始するために webpack が使用するファイルです。出力のファイル名は `bundle.js` として指定されます。この出力ファイルには、アプリケーションの実行に必要なすべての JavaScript が含まれています。エントリーポイントで指定されたコードが SDK for JavaScript などの他のモジュールをインポートまたは必要とする場合、そのコードは設定で指定しなくてもバンドルされます。
以前にインストールされた `json-loader` プラグインの設定は、JSON ファイルをインポートする方法を webpack に指定します。デフォルトでは、webpack は JavaScript のみをサポートしていますが、ローダーを使用して他のファイルタイプのインポートのサポートを追加します。SDK for JavaScript で JSON ファイルが広範囲に使用されているため、`json-loader` が含まれていない場合、webpack はバンドル生成時にエラーをスローします。
## 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": "^2.6.1"
},
"devDependencies": {
"json-loader": "^0.5.4",
"webpack": "^1.13.2"
}
}
```
アプリケーションを構築するには、次のコマンドを入力します。
```
npm run build
```
その後、Webpack モジュールバンドラーは、プロジェクトのルートディレクトリで指定した JavaScript ファイルを生成します。
## Webpack バンドルの使用
ブラウザスクリプト内でバンドルを使用するには、次の例で示すように `