목차
Parcel 설치
Parcel Bundler를 설치해주세요.
Bootstrap 설치
npm을 통해서 Node.js 모듈로 bootstrap을 설치해주세요.
Bootstrap은 peerDependencies 속성에 지정된 Popper에 의존합니다. 이것은 npm install @ popperjs/core를 사용하여 두 가지 모두를 package.json에 추가해야 한다는 것을 의미합니다.
모든 작업이 완료되면 프로젝트는 다음과 같이 구성됩니다:
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
JavaScript 불러오기
앱의 진입점 (일반적으로 src/index.js)에서 Bootstrap의 JavaScript를 가져옵니다. 모든 플러그인을 하나의 파일로 가져오거나 일부만 필요한 경우 개별적으로 가져올 수도 있습니다.
// Import all plugins
import * as bootstrap from 'bootstrap';
// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';
// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';
CSS 불러오기
Bootstrap의 잠재력을 최대한 활용하고 필요에 맞게 사용자 지정하려면 프로젝트 번들링 과정의 일부로 소스 파일을 사용하세요.
자체 scss/custom.scss를 만들어서 Bootstrap의 Sass 파일을 불러오고 기본 제공되는 맞춤 변수를 재정의해주세요.
앱 빌드
</body> 태그로 닫기 전에 src/index.js를 포함시켜주세요.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
package.json 수정
package.json 파일에 dev 및 build 스크립트를 추가해주세요.
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
dev 스크립트 실행
http://127.0.0.1:1234를 통해서 앱에 접근할 수 있습니다.
npm run dev
앱 파일 빌드
빌드된 파일은 build/ 폴더 내에 있습니다.
npm run build