in English

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:

  1. Muat turun dan pasang Node.js , yang kami gunakan untuk mengurus kebergantungan kami.
  2. Sama ada muat turun sumber Bootstrap atau garpu repositori Bootstrap .
  3. Navigasi ke direktori akar /bootstrapdan jalankan npm 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 termasuk perintah dan tugas berikut:

Tugasan Penerangan
npm run dist npm run distmencipta /dist/direktori dengan fail yang disusun. Menggunakan Sass , Autoprefixer dan terser .
npm test Menjalankan ujian secara setempat selepas dijalankannpm run dist
npm run docs-serve Membina dan menjalankan dokumentasi secara setempat.

Jalankan npm rununtuk melihat semua skrip npm.

Mulakan dengan Bootstrap melalui npm dengan projek permulaan kami! Pergi ke repositori templat twbs/bootstrap-npm-starter untuk melihat cara membina dan menyesuaikan Bootstrap dalam projek npm anda sendiri. Termasuk ikon pengkompil Sass, Autoprefixer, Stylelint, PurgeCSS dan Bootstrap.

Sass

Bootstrap v4 menggunakan Node Sass untuk menyusun fail sumber Sass kami ke dalam fail CSS (termasuk dalam proses binaan kami). Untuk mendapatkan CSS terjana yang sama apabila menyusun Sass menggunakan saluran paip aset anda sendiri, anda perlu menggunakan pengkompil Sass yang menyokong sekurang-kurangnya ciri yang Node Sass lakukan. Perkara ini penting untuk diperhatikan kerana mulai 26 Oktober 2020, LibSass dan pakej yang dibina di atasnya—termasuk Node Sass—tidak digunakan lagi .

Jika anda memerlukan ciri Sass yang lebih baharu atau keserasian dengan piawaian CSS yang lebih baharu, Dart Sass kini merupakan pelaksanaan utama Sass dan menyokong API JavaScript yang serasi sepenuhnya dengan Node Sass (dengan beberapa pengecualian disenaraikan pada halaman GitHub Dart Sass ).

Kami meningkatkan ketepatan pembundaran Sass kepada 6 (secara lalai, ia adalah 5 dalam Node Sass) untuk mengelakkan isu pembundaran penyemak imbas. Jika anda menggunakan Dart Sass ini tidak akan menjadi sesuatu yang anda perlu laraskan, kerana pengkompil itu menggunakan ketepatan pembundaran 10 dan atas sebab kecekapan tidak membenarkan ia dilaraskan.

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.

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:

  1. Jalankan melalui persediaan alatan di atas untuk memasang semua kebergantungan.
  2. Dari direktori akar /bootstrap, jalankan npm run docs-servedalam baris arahan.
  3. 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.