부트스트랩 및 소포

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

이 페이지에서

끝까지 건너뛰고 싶으신가요? twbs/examples 리포지토리 에서 이 가이드의 소스 코드와 작업 데모를 다운로드하세요 . 또한 StackBlitz에서 예제를 열 수 있지만 Parcel이 현재 지원되지 않기 때문에 실행할 수 없습니다.

설정

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

프로젝트 폴더를 만들고 npm을 설정합니다. 폴더를 만들고 모든 대화형 질문을 하지 않도록 인수로 my-projectnpm을 초기화합니다 .-y
```
mkdir my-project && cd my-project
npm init -y
```
소포를 설치합니다. Webpack 가이드와 달리 여기에는 단일 빌드 도구 종속성만 있습니다. Parcel은 Sass와 같은 언어 변환기를 감지하면 자동으로 설치합니다. 우리는 --save-dev이 종속성이 프로덕션용이 아니라 개발용이라는 신호를 사용합니다.
```
npm i --save-dev parcel
```
부트스트랩을 설치합니다. 이제 부트스트랩을 설치할 수 있습니다. 드롭다운, 팝오버 및 툴팁이 위치 지정에 따라 달라지므로 Popper도 설치할 것입니다. 이러한 구성 요소를 사용할 계획이 없다면 여기에서 Popper를 생략할 수 있습니다.
```
npm i --save bootstrap @popperjs/core
```

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

프로젝트 구조

이미 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

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

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

이 시점에서 모든 것이 올바른 위치에 있지만 Parcel은 서버를 시작하기 위해 HTML 페이지와 npm 스크립트가 필요합니다.

구획 구성

종속성이 설치되고 프로젝트 폴더가 코딩을 시작할 준비가 되었으므로 이제 Parcel을 구성하고 프로젝트를 로컬에서 실행할 수 있습니다. Parcel 자체에는 설계상 구성 파일이 필요하지 않지만 서버를 시작하려면 npm 스크립트와 HTML 파일이 필요합니다.

파일 을 입력 src/index.html합니다. Parcel은 렌더링할 페이지가 필요하므로 페이지를 사용 index.html하여 CSS 및 JavaScript 파일을 비롯한 몇 가지 기본 HTML을 설정합니다.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
부트스트랩의 CSS가 Webpack에 의해 로드되는 시점을 볼 수 있도록 여기 div class="container"에 약간의 부트스트랩 스타일을 포함하고 있습니다.<button>

Parcel은 Sass를 사용하고 있음을 자동으로 감지하고 이를 지원하기 위해 Sass Parcel 플러그인 을 설치합니다. 그러나 원하는 경우 수동으로 실행할 수도 있습니다 npm i --save-dev @parcel/transformer-sass.
Parcel npm 스크립트를 추가합니다. 열고 package.json다음 start스크립트를 scripts개체에 추가합니다. 이 스크립트를 사용하여 Parcel 개발 서버를 시작하고 dist디렉토리에 컴파일된 후 생성한 HTML 파일을 렌더링합니다.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
마지막으로 Parcel을 시작할 수 있습니다. my-project터미널 의 폴더에서 새로 추가된 npm 스크립트를 실행합니다.
```
npm start
```

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

부트스트랩 가져오기

Bootstrap을 Parcel로 가져오려면 두 가지 가져오기가 필요합니다. 하나는 our로 styles.scss, 다른 하나는 main.js.

부트스트랩의 CSS를 가져옵니다. 다음을 추가하여 src/scss/styles.scssBootstrap의 소스 Sass를 모두 가져옵니다.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
원하는 경우 스타일시트를 개별적으로 가져올 수도 있습니다. 자세한 내용은 Sass 가져오기 문서 를 참조하세요.
Bootstrap의 JS를 가져옵니다. 다음을 추가하여 src/js/main.jsBootstrap의 모든 JS를 가져옵니다. Popper는 Bootstrap을 통해 자동으로 가져옵니다.
```
// 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를 포함하고 필요한 Bootstrap의 CSS 및 JS 부분만 가져와서 빌드를 최적화하는 방법 은 전체 Parcel 예제 프로젝트를 확인 하십시오 .

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