使用 webpack 捆绑应用程序 - AWS SDK for JavaScript

帮助我们改进AWS SDK for JavaScript版本 3 (V3) 文档,方法是使用反馈链接,或者在上创建议题或拉取请求GitHub.

这些区域有:AWS SDK for JavaScriptV3 API 参考指南详细描述了所有的 API 操作AWS SDK for JavaScript版本 3 (V3)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

使用 webpack 捆绑应用程序

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

这些区域有:webpack模块捆绑器解析你的应用程序代码,搜索import要么require语句,以创建包含应用程序所需的所有资产的捆绑包。这样可以通过网页轻松提供资产。适用于 JavaScript 的开发工具包可以包含在webpack作为包括在输出包中的依赖关系之一。

有关 的更多信息webpack,请参阅webpack 模块捆绑程序(位于 GitHub 上)。

安装 webpack

安装webpack模块捆绑程序,您必须已经安装了 npm(Node.js 程序包管理器)。键入以下命令以安装webpackCLI 和 JavaScript 模块。

npm install --save-dev webpack

使用path用于处理文件和目录路径的模块,它是通过 webpack 自动安装的,你可能需要安装 Node.jspath-browserify程序包。

npm install --save-dev path-browserify

配置 webpack

默认情况下,Webpack 搜 JavaScript 名为webpack.config.js在项目的根目录中。此文件指定您的配置选项。以下是一个示例:webpack.config.jsWebpack 5.0.0 及更高版本的配置文件。

注意

Webpack 配置要求因您安装的 Webpack 版本而异。有关更多信息,请参阅 。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"}] } **/ };

在此示例中,browser.js被指定为入口点. 这些区域有:入口点是文件webpack使用来开始搜索导入的模块。输出的文件名指定为 bundle.js。此输出文件包含应用程序运行所需的全部 JavaScript。如果入口点中指定的代码导入或需要其他模块(例如适用于 JavaScript 的 SDK),则将绑定该代码而无需在配置中指定它。

运行 webpack

构建要使用的应用程序webpack将以下内容添加到scripts您的对象package.json文件。

"build": "webpack"

以下是示例:package.json演示添加的文件webpack.

{ "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 的捆绑

您可以使用webpack要生成在 Node.js 中运行的捆绑,请通过指定node作为配置中的目标。

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"}] } **/ };