부트스트랩 및 Vite

Vite를 사용하여 프로젝트에 Bootstrap의 CSS 및 JavaScript를 포함하고 번들하는 방법에 대한 공식 가이드입니다.

이 페이지에서

끝까지 건너뛰고 싶으신가요? twbs/examples 리포지토리 에서 이 가이드의 소스 코드와 작업 데모를 다운로드하세요 . 실시간 편집을 위해 StackBlitz에서 예제를 열 수도 있습니다 .

설정

우리는 처음부터 Bootstrap으로 Vite 프로젝트를 구축 중이므로 실제로 시작하기 전에 몇 가지 전제 조건과 선행 단계가 있습니다. 이 가이드를 사용하려면 Node.js가 설치되어 있고 터미널에 대해 어느 정도 익숙해야 합니다.

프로젝트 폴더를 만들고 npm을 설정합니다. 폴더를 만들고 모든 대화형 질문을 하지 않도록 인수로 my-projectnpm을 초기화합니다 .-y
```
mkdir my-project && cd my-project
npm init -y
```
Vite를 설치합니다. Webpack 가이드와 달리 여기에는 단일 빌드 도구 종속성만 있습니다. 우리는 --save-dev이 종속성이 프로덕션용이 아니라 개발용이라는 신호를 사용합니다.
```
npm i --save-dev vite
```
부트스트랩을 설치합니다. 이제 부트스트랩을 설치할 수 있습니다. 드롭다운, 팝오버 및 툴팁이 위치 지정에 따라 달라지므로 Popper도 설치할 것입니다. 이러한 구성 요소를 사용할 계획이 없다면 여기에서 Popper를 생략할 수 있습니다.
```
npm i --save bootstrap @popperjs/core
```
추가 종속성을 설치합니다. Vite 및 Bootstrap 외에도 Bootstrap의 CSS를 적절하게 가져오고 번들하기 위한 또 다른 종속성(Sass)이 필요합니다.
```
npm i --save-dev sass
```

이제 필요한 모든 종속성을 설치하고 설정했으므로 프로젝트 파일 생성 및 부트스트랩 가져오기 작업을 시작할 수 있습니다.

프로젝트 구조

이미 my-project폴더를 만들고 npm을 초기화했습니다. 이제 src폴더, 스타일시트 및 JavaScript 파일도 만들어 프로젝트 구조를 완성합니다. 에서 다음을 실행 my-project하거나 아래 표시된 폴더 및 파일 구조를 수동으로 생성합니다.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js

완료되면 전체 프로젝트는 다음과 같아야 합니다.

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

이 시점에서 모든 것이 올바른 위치에 있지만 아직 입력하지 않았기 때문에 Vite가 작동하지 않습니다 vite.config.js.

초대 구성

종속성이 설치되고 프로젝트 폴더가 코딩을 시작할 준비가 되면 이제 Vite를 구성하고 프로젝트를 로컬에서 실행할 수 있습니다.

vite.config.js편집기에서 엽니 다. 비어 있으므로 서버를 시작할 수 있도록 상용구 구성을 추가해야 합니다. 구성의 이 부분은 Vite가 우리 프로젝트의 JavaScript와 개발 서버가 어떻게 작동해야 하는지( src핫 리로드로 폴더에서 가져오기)를 찾도록 지시합니다.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

다음으로 작성 src/index.html합니다. 이것은 이후 단계에서 추가할 번들 CSS 및 JS를 활용하기 위해 Vite가 브라우저에 로드할 HTML 페이지입니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

부트스트랩의 CSS가 Vite에 의해 로드되는 시점을 볼 수 있도록 여기 div class="container"에 약간의 부트스트랩 스타일을 포함하고 있습니다.<button>

이제 Vite를 실행하기 위해 npm 스크립트가 필요합니다. 아래에 표시된 스크립트를 열고 package.json추가합니다 start(이미 테스트 스크립트가 있어야 함). 이 스크립트를 사용하여 로컬 Vite 개발 서버를 시작합니다.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
마지막으로 Vite를 시작할 수 있습니다. my-project터미널 의 폴더에서 새로 추가된 npm 스크립트를 실행합니다.
```
npm start
```

이 가이드의 다음이자 마지막 섹션에서는 모든 Bootstrap의 CSS와 JavaScript를 가져올 것입니다.

부트스트랩 가져오기

에서 Bootstrap의 Sass 가져오기를 설정합니다 vite.config.js. 이제 구성 파일이 완성되었으며 아래 스니펫과 일치해야 합니다. 여기에서 유일하게 새로운 부분은 섹션입니다. 이 resolve섹션을 사용하여 내부 소스 파일에 별칭을 추가하여 node_modules가져오기를 최대한 간단하게 유지합니다.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
이제 부트스트랩의 CSS를 가져오겠습니다. 다음을 추가하여 src/scss/styles.scssBootstrap의 소스 Sass를 모두 가져옵니다.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
원하는 경우 스타일시트를 개별적으로 가져올 수도 있습니다. 자세한 내용은 Sass 가져오기 문서 를 참조하세요.
다음으로 CSS를 로드하고 Bootstrap의 JavaScript를 가져옵니다. src/js/main.jsCSS를 로드하고 모든 Bootstrap의 JS를 가져오려면 에 다음을 추가하십시오 . Popper는 Bootstrap을 통해 자동으로 가져옵니다.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
번들 크기를 줄이기 위해 필요에 따라 JavaScript 플러그인을 개별적으로 가져올 수도 있습니다.
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Bootstrap의 플러그인을 사용하는 방법에 대한 자세한 내용은 JavaScript 문서 를 참조하십시오.
그리고 당신은 끝났습니다! 🎉 Bootstrap의 소스 Sass와 JS가 완전히 로드되면 로컬 개발 서버가 다음과 같이 보일 것입니다.

이제 사용하려는 부트스트랩 구성 요소를 추가할 수 있습니다. 추가 사용자 정의 Sass를 포함하고 필요한 부트스트랩의 CSS 및 JS 부분만 가져와서 빌드를 최적화하는 방법 은 전체 Vite 예제 프로젝트를 확인 하십시오 .

여기에 잘못된 것이 있거나 오래된 것이 있습니까? GitHub에서 문제를 여 십시오 . 문제 해결에 도움이 필요하십니까? GitHub에서 검색하거나 토론을 시작하세요 .