Önyükleme ve Paket

Parcel kullanarak projenize Bootstrap'in CSS ve JavaScript'ini nasıl dahil edeceğinize ve paketleyeceğinize dair resmi kılavuz.

Bu sayfada

Sona atlamak ister misin? Bu kılavuz için kaynak kodunu ve çalışma demosunu twbs/examples deposundan indirin . Örneği StackBlitz'de de açabilir, ancak Parsel şu anda orada desteklenmediğinden çalıştıramazsınız.

Kurmak

Bootstrap ile sıfırdan bir Parsel projesi oluşturuyoruz, bu nedenle gerçekten başlayabilmemiz için bazı önkoşullar ve ön adımlar var. Bu kılavuz, Node.js'nin kurulu olmasını ve terminal hakkında biraz bilgi sahibi olmanızı gerektirir.

Bir proje klasörü oluşturun ve npm'yi kurun. Klasörü oluşturacağız ve bize tüm etkileşimli soruları sormasını önlemek my-projectiçin argümanla npm'yi başlatacağız .-y
```
mkdir my-project && cd my-project
npm init -y
```
Parsel yükleyin. Web paketi kılavuzumuzun aksine, burada yalnızca tek bir oluşturma aracı bağımlılığı vardır. Parsel, dil dönüştürücülerini (Sass gibi) algıladıkça otomatik olarak kuracaktır. Bu --save-devbağımlılığın yalnızca geliştirme amaçlı olduğunu ve üretim için olmadığını belirtmek için kullanıyoruz.
```
npm i --save-dev parcel
```
Bootstrap'i yükleyin. Artık Bootstrap'i kurabiliriz. Açılır listelerimiz, açılır pencerelerimiz ve araç ipuçlarımız, konumları için ona bağlı olduğundan, Popper'ı da kuracağız. Bu bileşenleri kullanmayı düşünmüyorsanız, burada Popper'ı atlayabilirsiniz.
```
npm i --save bootstrap @popperjs/core
```

Artık gerekli tüm bağımlılıkları yüklediğimize göre, proje dosyalarını oluşturmaya ve Bootstrap'i içe aktarmaya başlayabiliriz.

proje yapısı

Klasörü zaten oluşturduk my-projectve npm'yi başlattık. Şimdi srcproje yapısını tamamlamak için klasörümüzü, stil sayfamızı ve JavaScript dosyamızı da oluşturacağız. Aşağıdakileri 'den çalıştırın my-projectveya aşağıda gösterilen klasör ve dosya yapısını manuel olarak oluşturun.

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

İşiniz bittiğinde, projenizin tamamı şöyle görünmelidir:

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

Bu noktada her şey doğru yerde ancak Parcel sunucumuzu başlatmak için bir HTML sayfasına ve npm betiğine ihtiyaç duyuyor.

Parsel Yapılandır

Bağımlılıklar kurulu ve proje klasörümüz kodlamaya başlamamız için hazır, artık Parsel'i yapılandırabilir ve projemizi yerel olarak çalıştırabiliriz. Parselin kendisi tasarım gereği yapılandırma dosyası gerektirmez, ancak sunucumuzu başlatmak için bir npm komut dosyasına ve bir HTML dosyasına ihtiyacımız var.

src/index.htmlDosyayı doldurun . Parselin oluşturulacak bir sayfaya ihtiyacı var, bu nedenle index.htmlsayfamızı CSS ve JavaScript dosyalarımız dahil bazı temel HTML'yi ayarlamak için kullanıyoruz.
```
<!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>
```
Bootstrap'ın CSS'sinin Webpack tarafından ne zaman yüklendiğini görebilmemiz için div class="container"ve ile birlikte buraya biraz Bootstrap stili ekliyoruz.<button>

Parsel, Sass kullandığımızı otomatik olarak algılayacak ve bunu desteklemek için Sass Parcel eklentisini yükleyecektir. Ancak dilerseniz manuel olarak da çalıştırabilirsiniz npm i --save-dev @parcel/transformer-sass.
Parsel npm komut dosyalarını ekleyin. Açın package.jsonve aşağıdaki startbetiği scriptsnesneye ekleyin. Bu betiği Parsel geliştirme sunucumuzu başlatmak ve oluşturduğumuz HTML dosyasını distdizine derlendikten sonra işlemek için kullanacağız.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Ve son olarak, Parsel'i başlatabiliriz. my-projectTerminalinizdeki klasörden yeni eklenen npm komut dosyasını çalıştırın :
```
npm start
```

Bu kılavuzun sonraki ve son bölümünde, Bootstrap'in tüm CSS ve JavaScript'lerini içe aktaracağız.

Önyüklemeyi İçe Aktar

Bootstrap'i Parsel'e içe aktarmak, biri bizim styles.scss, diğeri de bizim main.js.

Bootstrap'in CSS'sini içe aktarın. src/scss/styles.scssBootstrap'in tüm kaynak Sass'larını içe aktarmak için aşağıdakini ekleyin .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
İsterseniz stil sayfalarımızı tek tek de içe aktarabilirsiniz. Ayrıntılar için Sass içe aktarma belgelerimizi okuyun .
Bootstrap'in JS'sini içe aktarın. src/js/main.jsTüm Bootstrap JS'lerini içe aktarmak için aşağıdakini ekleyin . Popper, Bootstrap aracılığıyla otomatik olarak içe aktarılacaktır.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Paket boyutlarını düşük tutmak için JavaScript eklentilerini gerektiği gibi tek tek de içe aktarabilirsiniz:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap eklentilerinin nasıl kullanılacağı hakkında daha fazla bilgi için JavaScript belgelerimizi okuyun .
Ve işin bitti! 🎉 Bootstrap'in kaynak Sass ve JS'si tamamen yüklendiğinde, yerel geliştirme sunucunuz artık böyle görünmelidir.

Artık kullanmak istediğiniz Bootstrap bileşenlerini eklemeye başlayabilirsiniz. Ek özel Sass'ı nasıl ekleyeceğiniz ve yapınızı yalnızca Bootstrap's CSS ve JS'nin ihtiyacınız olan kısımlarını içe aktararak optimize etmek için tam Parsel örnek projesini kontrol ettiğinizden emin olun .

Burada yanlış veya güncel olmayan bir şey mi gördünüz? Lütfen GitHub'da bir sorun açın . Sorun giderme konusunda yardıma mı ihtiyacınız var? GitHub'da arama yapın veya bir tartışma başlatın .