

适用于 JavaScript 的 AWS SDK v2 已终止支持。建议您迁移到 [适用于 JavaScript 的 AWS SDK 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 捆绑应用程序
<a name="webpack"></a>

浏览器脚本或 Node.js 中使用代码模块的 Web 应用程序会创建依赖关系。这些代码模块可能会具有自身的依赖关系，导致您的应用程序需要一组互连的模块才能正常工作。要管理依赖关系，您可以使用 webpack 等模块捆绑程序。

Webpack 模块捆绑程序解析您的应用程序代码，搜索 `import` 或 `require` 语句，创建包含您应用程序所需的全部资产的捆绑，这样可以轻松地通过网页提供资产服务。SDK for JavaScript 可以作为包括在输出捆绑中的依赖项之一包括在 webpack 中。

有关 webpack 的更多信息，请参阅 GitHub 上的 [webpack 模块捆绑程序](https://webpack.github.io/)。

## 安装 Webpack
<a name="webpack-installing"></a>

要安装 webpack 模块捆绑程序，您必须已经安装了 npm（Node.js 程序包管理器）。键入以下命令以安装 webpack CLI 和 JavaScript 模块。

```
npm install webpack
```

您可能还需要安装允许它加载 JSON 文件的 webpack 插件。键入以下命令，安装 JSON 加载程序插件。

```
npm install json-loader
```

## 配置 Webpack
<a name="webpack-configuring"></a>

默认情况下，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` 插件中的配置指定 webpack 如何导入 JSON 文件。默认情况下，Webpack 仅支持 JavaScript，不过可使用加载程序来添加对导入其他文件类型的支持。由于 SDK for JavaScript 广泛使用 JSON 文件，如果未包括 `json-loader`，webpack 在生成捆绑时会引发错误。

## 运行 Webpack
<a name="webpack-running"></a>

要生成应用程序以使用 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 捆绑
<a name="webpack-using-bundle"></a>

要在浏览器脚本中使用捆绑，您可以使用 `<script>` 标签整合捆绑，如下例中所示。

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

## 导入单独的服务
<a name="webpack-importing-services"></a>

webpack 的优势之一是，它解析您代码中的依赖关系并仅捆绑应用程序所需的代码。如果您使用 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()` 函数指定整个开发工具包。使用此代码生成的 webpack 捆绑将包括完整 SDK，但如果仅使用 Amazon S3 客户端类，则不需要完整 SDK。如果只包括 Amazon S3 服务所需的部分 SDK，捆绑的大小将大幅减小。甚至设置配置也不需要完整 SDK，因为您可以在 Amazon S3 服务对象上设置配置数据。

以下是在仅包括 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 的捆绑
<a name="webpack-nodejs-bundles"></a>

您可以通过在配置中将其指定为目标，使用 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']
      }
    ]
  }
}
```