Önyükleme ve Vite

Vite 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 canlı düzenleme için StackBlitz'de de açabilirsiniz.

Kurmak

Bootstrap ile sıfırdan bir Vite 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
```
Vite'ı yükleyin. Web paketi kılavuzumuzun aksine, burada yalnızca tek bir oluşturma aracı bağımlılığı vardı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 vite
```
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
```
Ek bağımlılık yükleyin. Vite ve Bootstrap'a ek olarak, Bootstrap'ın CSS'sini düzgün bir şekilde içe aktarmak ve paketlemek için başka bir bağımlılığa (Sass) ihtiyacımız var.
```
npm i --save-dev sass
```

Artık gerekli tüm bağımlılıkları yüklediğimize ve ayarladığımıza 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 vite.config.js

İş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
└── vite.config.js

Bu noktada her şey doğru yerde ama Vite çalışmayacak çünkü henüz doldurmadık vite.config.js.

Vite'ı Yapılandır

Bağımlılıklar yüklendiğinde ve proje klasörümüz kodlamaya başlamamız için hazır olduğunda, artık Vite'ı yapılandırabilir ve projemizi yerel olarak çalıştırabiliriz.

Editörünüzde açın vite.config.js. Boş olduğu için, sunucumuzu başlatabilmemiz için ona bazı ortak kalıp yapılandırması eklememiz gerekecek. Yapılandırmanın bu kısmı, Vite'a projemizin JavaScript'ini ve geliştirme sunucusunun nasıl davranması gerektiğini ( srchot yeniden yükleme ile klasörden çekerek) aramasını söyler.
```
const path = require('path')

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

Ardından dolduruyoruz src/index.html. Bu, Vite'ın daha sonraki adımlarda ekleyeceğimiz paketlenmiş CSS ve JS'yi kullanmak için tarayıcıya yükleyeceği HTML sayfasıdır.

<!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>

Bootstrap'ın CSS'sinin Vite tarafından ne zaman yüklendiğini görebilmemiz için div class="container"ve ile birlikte buraya biraz Bootstrap stili ekliyoruz.<button>

Şimdi Vite'ı çalıştırmak için bir npm betiğine ihtiyacımız var. Aşağıda gösterilen komut dosyasını açın package.jsonve ekleyin start(test komut dosyasına zaten sahip olmalısınız). Yerel Vite dev sunucumuzu başlatmak için bu betiği kullanacağız.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ve son olarak, Vite'ı 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'in Sass içe aktarımını vite.config.js. Yapılandırma dosyanız şimdi tamamlandı ve aşağıdaki kod parçasıyla eşleşmelidir. Buradaki tek yeni kısım bölümdür—bunu, içeri aktarmayı olabildiğince basit tutmak resolveiçin kaynak dosyalarımıza bir takma ad eklemek için kullanıyoruz .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
  }
}
```
Şimdi Bootstrap'ın CSS'sini içe aktaralım. 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 .
Ardından CSS'yi yüklüyoruz ve Bootstrap'ın JavaScript'ini içe aktarıyoruz. src/js/main.jsCSS'yi yüklemek ve tüm Bootstrap JS'lerini içe aktarmak için aşağıdakileri ekleyin . Popper, Bootstrap aracılığıyla otomatik olarak içe aktarılacaktır.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 eksiksiz Vite ö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 .