AWS SDK for JavaScript V3 API 참조 안내서는 AWS SDK for JavaScript 버전 3 (V3) 의 모든 API 작업을 자세히 설명합니다.
기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
웹팩이 포함된 번들 애플리케이션
브라우저 스크립트 또는 Node.js에서 웹 애플리케이션이 코드 모듈을 사용하면 종속성이 생성됩니다. 이러한 코드 모듈에는 자체 종속성이 있을 수 있어 애플리케이션 작동에 필요한 상호 연결된 모듈 모음이 생깁니다. 종속성을 관리하려면 webpack
과 같은 모듈 번들러를 사용하면 됩니다.
webpack
모듈 번들러는 애플리케이션 코드를 구문 분석하여 import
또는 require
문을 검색해 애플리케이션에 필요한 모든 자산이 포함된 번들을 생성합니다. 이렇게 하면 웹 페이지를 통해 자산을 쉽게 제공할 수 있습니다. 용 SDK는 출력 번들에 포함할 종속성 중 webpack
하나로 포함될 JavaScript 수 있습니다.
에 대한 webpack
자세한 내용은 의 webpack 모듈
웹팩 설치
webpack
모듈 번들러를 설치하려면 먼저, Node.js 패키지 관리자인 npm이 설치되어 있어야 합니다. 다음 명령을 입력하여 webpack
CLI와 JavaScript 모듈을 설치합니다.
npm install --save-dev webpack
webpack과 함께 자동으로 설치되는 파일 및 디렉터리 경로 작업을 위해 path
모듈을 사용하려면 Node.js path-browserify
패키지를 설치해야 할 수도 있습니다.
npm install --save-dev path-browserify
웹팩을 구성합니다.
기본적으로 Webpack은 프로젝트의 루트 webpack.config.js
디렉터리에 이름이 지정된 JavaScript 파일을 검색합니다. 이 파일은 구성 옵션을 지정합니다. 다음은 WebPack 버전 5.0.0 webpack.config.js
이상의 구성 파일 예제입니다.
참고
Webpack 구성 요구 사항은 설치하는 Webpack 버전에 따라 다릅니다. 자세한 내용은 Webpack documentation
// 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 진입점에 지정된 코드가 SDK for JavaScript 등의 다른 모듈을 가져오거나 요구하는 경우 구성에서 해당 코드를 지정하지 않아도 해당 코드가 번들로 제공됩니다.
웹팩을 실행합니다.
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/client-iam": "^3.32.0", "@aws-sdk/client-s3": "^3.32.0" }, "devDependencies": { "webpack": "^5.0.0" } }
애플리케이션을 빌드하려면 다음 명령을 입력합니다.
npm run build
그러면 webpack
모듈 번들러가 프로젝트의 루트 디렉터리에 지정한 JavaScript 파일을 생성합니다.
웹팩 번들을 사용하세요.
브라우저 스크립트에서 번들을 사용하려면 다음 예와 같이 <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
를 대상으로 지정하여 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, "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"}] } **/ };