View a markdown version of this page

使用 Webpack 捆绑应用程序 - Amazon SDK for JavaScript
安装 Webpack配置 Webpack运行 Webpack使用 Webpack 捆绑导入单独的服务适用于 Node.js 的捆绑
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

Amazon SDK for JavaScript v2 已终止支持。建议您迁移到 Amazon SDK for JavaScript v3。有关更多详情和如何迁移的信息，请参阅本公告。

使用 Webpack 捆绑应用程序

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

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

有关 webpack 的更多信息，请参阅 GitHub 上的 webpack 模块捆绑程序。

安装 Webpack

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

npm install webpack

您可能还需要安装允许它加载 JSON 文件的 webpack 插件。键入以下命令，安装 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 插件中的配置指定 webpack 如何导入 JSON 文件。默认情况下，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 的优势之一是，它解析您代码中的依赖关系并仅捆绑应用程序所需的代码。如果您使用 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 的捆绑

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