in English
소포
Parcel을 사용하여 프로젝트에 Bootstrap을 포함하는 방법을 알아보세요.
이 페이지에서
소포 설치
소포 번들러 를 설치합니다 .
부트스트랩 설치
npm을 사용하여 부트스트랩을 Node.js 모듈로 설치합니다 .
부트스트랩은 속성 에 지정된 Popper 에 의존 합니다. peerDependencies
이것은 당신이 당신의 package.json
using 에 둘 다 추가해야 한다는 것을 의미합니다 npm install @popperjs/core
.
모든 작업이 완료되면 프로젝트는 다음과 같이 구성됩니다.
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
자바스크립트 가져오기
앱의 진입점(일반적으로 )에서 Bootstrap의 JavaScript 를 가져 옵니다 src/index.js
. 모든 플러그인을 하나의 파일로 가져오거나 일부만 필요한 경우 별도로 가져올 수 있습니다.
// 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의 잠재력을 최대한 활용하고 필요에 맞게 사용자 정의하려면 소스 파일을 프로젝트 번들링 프로세스의 일부로 사용하십시오.
부트스트랩의 Sass 파일을 가져오기 위해 자신 scss/custom.scss
을 생성한 다음 내장된 사용자 정의 변수 를 재정의합니다 .
앱 빌드
src/index.js
닫는 </body>
태그 앞에 포함 합니다.
<!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
dev
파일에 및 build
스크립트를 추가 package.json
합니다.
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
개발 스크립트 실행
에서 앱에 액세스할 수 있습니다 http://127.0.0.1:1234
.
npm run dev
앱 파일 빌드
빌드된 파일은 build/
폴더에 있습니다.
npm run build