Membina alatan
Ketahui cara menggunakan skrip npm yang disertakan Bootstrap untuk membina dokumentasi kami, menyusun kod sumber, menjalankan ujian dan banyak lagi.
Persediaan alatan
Bootstrap menggunakan skrip npm untuk sistem binaannya. Package.json kami termasuk kaedah mudah untuk bekerja dengan rangka kerja, termasuk menyusun kod, menjalankan ujian dan banyak lagi.
Untuk menggunakan sistem binaan kami dan menjalankan dokumentasi kami secara setempat, anda memerlukan salinan fail sumber Bootstrap dan Node. Ikuti langkah-langkah ini dan anda harus bersedia untuk menggegarkan:
- Muat turun dan pasang Node.js , yang kami gunakan untuk mengurus kebergantungan kami.
- Sama ada muat turun sumber Bootstrap atau garpu repositori Bootstrap .
- Navigasi ke direktori akar
/bootstrapdan jalankannpm installuntuk memasang kebergantungan setempat kami yang disenaraikan dalam package.json .
Apabila selesai, anda akan dapat menjalankan pelbagai arahan yang disediakan daripada baris arahan.
Menggunakan skrip npm
Package.json kami merangkumi banyak tugas untuk membangunkan projek. Jalankan npm rununtuk melihat semua skrip npm dalam terminal anda. Tugas utama termasuk:
| Tugasan | Penerangan |
|---|---|
npm start |
Menyusun CSS dan JavaScript, membina dokumentasi dan memulakan pelayan setempat. |
npm run dist |
Mencipta dist/direktori dengan fail yang disusun. Memerlukan Sass , Autoprefixer dan terser . |
npm test |
Menjalankan ujian secara setempat selepas dijalankannpm run dist |
npm run docs-serve |
Membina dan menjalankan dokumentasi secara setempat. |
Sass
Bootstrap menggunakan Dart Sass untuk menyusun fail sumber Sass kami ke dalam fail CSS (termasuk dalam proses binaan kami), dan kami mengesyorkan anda melakukan perkara yang sama jika anda menyusun Sass menggunakan saluran paip aset anda sendiri. Kami sebelum ini menggunakan Node Sass untuk Bootstrap v4, tetapi LibSass dan pakej yang dibina di atasnya, termasuk Node Sass, kini tidak digunakan lagi .
Dart Sass menggunakan ketepatan pembundaran 10 dan atas sebab kecekapan tidak membenarkan pelarasan nilai ini. Kami tidak menurunkan ketepatan ini semasa pemprosesan lanjut CSS terjana kami, seperti semasa pemindahan, tetapi jika anda memilih untuk berbuat demikian, kami mengesyorkan mengekalkan ketepatan sekurang-kurangnya 6 untuk mengelakkan isu pembundaran penyemak imbas.
Autoprefixer
Bootstrap menggunakan Autoprefixer (termasuk dalam proses binaan kami) untuk menambahkan awalan vendor secara automatik pada beberapa sifat CSS pada masa binaan. Melakukannya menjimatkan masa dan kod kami dengan membenarkan kami menulis bahagian penting CSS kami sekali gus sambil menghapuskan keperluan untuk campuran vendor seperti yang terdapat dalam v3.
Kami mengekalkan senarai penyemak imbas yang disokong melalui Autoprefixer dalam fail berasingan dalam repositori GitHub kami. Lihat .browserslistrc untuk butiran.
RTLCSS
Bootstrap menggunakan RTLCSS untuk memproses CSS yang disusun dan menukarnya kepada RTL – pada asasnya menggantikan sifat sedar arah mendatar (cth. padding-left) dengan sebaliknya. Ia membenarkan kami hanya menulis CSS kami sekali dan membuat tweak kecil menggunakan kawalan RTLCSS dan arahan nilai .
Dokumentasi tempatan
Menjalankan dokumentasi kami secara tempatan memerlukan penggunaan Hugo, yang dipasang melalui pakej npm hugo-bin . Hugo ialah penjana tapak statik yang sangat pantas dan agak meluas yang menyediakan kami: asas termasuk, fail berasaskan Markdown, templat dan banyak lagi. Berikut ialah cara untuk memulakannya:
- Jalankan melalui persediaan alatan di atas untuk memasang semua kebergantungan.
- Dari direktori akar
/bootstrap, jalankannpm run docs-servedalam baris arahan. - Buka
http://localhost:9001/dalam penyemak imbas anda, dan voilà.
Ketahui lebih lanjut tentang menggunakan Hugo dengan membaca dokumentasinya .
Penyelesaian masalah
Sekiranya anda menghadapi masalah dengan memasang kebergantungan, nyahpasang semua versi kebergantungan sebelumnya (global dan tempatan). Kemudian, jalankan semula npm install.