AWS SDK for JavaScript v2 のサポート終了が間近に迫っていることが発表
Webpack によるアプリケーションのバンドル
ブラウザスクリプト内のウェブアプリケーションまたは Node.js がコードモジュールを使用すると、依存関係が生じます。これらのコードモジュールは独自の依存関係を持つことができ、結果として、アプリケーションが機能するために必要な、相互接続されたモジュールの集まりができます。依存関係を管理するには、webpack などのモジュールバンドラーを使用できます。
Webpack モジュールバンドラーはアプリケーションコードを解析して、import
または require
ステートメントを検索し、アプリケーションに必要なすべてのアセットを含むバンドルを作成します。これにより、アセットがウェブページから簡単に提供されるようにできます。SDK for JavaScript は、出力バンドルに含める依存関係の 1 つとして webpack に含めることができます。
Webpack の詳細については、GitHub の Webpack モジュールバンドラー
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 バンドルの使用
ブラウザスクリプト内でバンドルを使用するには、次の例で示すように <script>
タグを使用してバンドルを組み込むことができます。
<!DOCTYPE html> <html> <head> <title>AWS SDK with webpack</title> </head> <body> <div id="list"></div> <script src="bundle.js"></script> </body> </html>
個々のサービスをインポートする
Webpack の利点の 1 つは、コード内の依存関係を解析して、アプリケーションに必要なコードだけをバンドルすることです。SDK for JavaScript を使用している場合、アプリケーションで実際に使用されている SDK の部分のみをバンドルすることで、webpack の出力サイズをかなり小さくすることができます。
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'});
require()
関数は、SDK 全体を指定します。このコードで生成された webpack バンドルには完全な SDK が含まれますが、Amazon S3 クライアントクラスのみが使用される場合、完全な SDK は必要ありません。SDK のうち、Amazon S3 サービスに必要な部分だけが含まれている場合、バンドルのサイズはかなり小さくなります。Amazon S3 サービスオブジェクトで構成データを設定できるため、構成の設定する場合でも完全な SDK は必要ありません。
SDK の Amazon S3 部分のみが含まれている場合、同じコードは次のようになります。
// 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
} });
Node.js 用のバンドル
設定のターゲットとして指定することで、webpack を使用して Node.js で実行されるバンドルを生成できます。
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, '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'] } ] } }