Pertanyaan 1:
Apa sebenarnya tujuan menginstal Bootstrap Twitter melalui npm? Saya pikir npm dimaksudkan untuk modul sisi server. Apakah lebih cepat melayani sendiri file bootstrap daripada menggunakan CDN?
Pertanyaan 2:
Jika saya npm menginstal Bootstrap, bagaimana saya akan menunjuk ke file bootstrap.js dan bootstrap.css?
Jawaban:
Inti menggunakan CDN adalah lebih cepat , pertama-tama, karena ini adalah jaringan terdistribusi , tetapi kedua, karena file statis sedang di-cache oleh browser dan kemungkinan besar bahwa, misalnya,
jquery
perpustakaan CDN di situs Anda penggunaan sudah diunduh oleh browser pengguna, dan karena itu file telah di-cache, dan karena itu tidak ada unduhan yang tidak perlu terjadi. Yang sedang berkata, itu masih merupakan ide bagus untuk memberikan mundur .Sekarang, titik paket npm bootstrap
adalah bahwa ia menyediakan javascript bootstrap file sebagai modul . Seperti yang telah disebutkan di atas, ini memungkinkan untuk
require
menggunakan browserify , yang merupakan kasus penggunaan yang paling mungkin dan, seperti yang saya pahami, alasan utama bootstrap dipublikasikan pada npm.Bagaimana cara menggunakannya
Bayangkan struktur proyek berikut:
Di Anda,
index.html
Anda dapat mereferensikan keduanyacss
danjs
file seperti ini:Yang merupakan cara paling sederhana, dan benar untuk
.css
file. Tetapi jauh lebih baik untuk memasukkanbootstrap.js
file seperti ini di suatu tempat dipublic/js/*.js
file Anda :Dan Anda memasukkan kode ini hanya dalam
javascript
file - file di mana Anda benar-benar membutuhkanbootstrap.js
. Browserify akan mengurus termasuk file ini untuk Anda.Sekarang, kekurangannya adalah Anda sekarang memiliki file front-end Anda sebagai
node_modules
dependensi, dannode_modules
folder biasanya tidak diperiksagit
. Saya pikir ini adalah bagian yang paling kontroversial, dengan banyak pendapat dan solusi .UPDATE Maret 2017
Hampir dua tahun telah berlalu sejak saya menulis jawaban ini dan pembaruan telah dilakukan.
Sekarang cara yang diterima secara umum adalah dengan menggunakan bundler seperti webpack (atau bundler pilihan lain) untuk menggabungkan semua aset Anda dalam langkah build.
Pertama, ini memungkinkan Anda untuk menggunakan sintaks commonjs seperti halnya browserify, jadi untuk memasukkan kode bootstrap js dalam proyek Anda, Anda melakukan hal yang sama:
Adapun
css
file, Webpack telah disebut " loader ". Mereka memungkinkan Anda menulis ini dalam kode js Anda:dan file css akan "secara ajaib" termasuk dalam build Anda. Mereka akan ditambahkan secara dinamis sebagai
<style />
tag saat aplikasi Anda berjalan, tetapi Anda dapat mengonfigurasi webpack untuk mengekspornya sebagaicss
file terpisah . Anda dapat membaca lebih lanjut tentang itu di dokumentasi webpack.Kesimpulannya.
node_modules
atau file yang dibangun secara dinamis untuk git. Anda dapat menambahkanbuild
skrip ke npm yang harus digunakan untuk menyebarkan file di server. Bagaimanapun, ini dapat dilakukan dengan berbagai cara tergantung pada proses pembuatan yang Anda inginkan.sumber
defer
atribut pada skrip Anda atau memuat file dengan malasJika Anda NPM modul-modul itu, Anda bisa menayangkannya menggunakan redirect statis.
Pertama instal paket:
Kemudian di server.js:
Lalu, akhirnya, di .html:
Saya tidak akan melayani halaman langsung dari folder tempat file server.js Anda (yang biasanya sama dengan node_modules) seperti yang diusulkan oleh timetowonder , dengan cara itu orang dapat mengakses file server.js Anda.
Tentu saja Anda bisa mengunduh dan menyalin & menempel di folder Anda, tetapi dengan NPM Anda dapat memperbarui bila diperlukan ... lebih mudah, saya pikir.
sumber
/js
rute yang sama dapat mengarahkan ulang ke dua direktori yang terpisah? Bagaimana cara menangani file yang saling bertentangan di masing-masing?Jawaban 1:
Mengunduh bootstrap melalui npm (atau bower) memungkinkan Anda memperoleh waktu latensi. Alih-alih mendapatkan sumber daya jarak jauh, Anda mendapatkan sumber daya lokal, lebih cepat, kecuali jika Anda menggunakan cdn (periksa jawaban di bawah)
"npm" awalnya untuk mendapatkan Node Module, tetapi dengan esensi dari bahasa Javascript (dan munculnya browserify), ia telah sedikit tumbuh. Bahkan, Anda bahkan dapat mengunduh AngularJS di npm, itu bukan kerangka sisi server. Browserify memungkinkan Anda untuk menggunakan AMD / RequireJS / CommonJS di sisi klien sehingga modul simpul dapat digunakan di sisi klien.
Jawaban 2:
Jika Anda dapat menginstal bootstrap (jika Anda tidak menggunakan file grunt atau gulp tertentu untuk pindah ke folder dist), bootstrap Anda akan berada di "./node_modules/bootstrap/bootstrap.min.css" jika saya tidak salah.
sumber
Gunakan npm / bower untuk menginstal bootstrap jika Anda ingin mengkompilasi ulang / mengubah lebih sedikit file / uji. Dengan gerutuan akan lebih mudah untuk melakukan ini, seperti yang ditunjukkan pada http://getbootstrap.com/getting-started/#grunt . Jika Anda hanya ingin menambahkan pustaka yang dikompilasi, silakan memasukkan file secara manual ke proyek.
Tidak, Anda harus melakukan ini sendiri atau menggunakan alat mendengus yang terpisah. Misalnya 'grunt-contrib-concat' Cara menggabungkan dan memperkecil beberapa file CSS dan JavaScript dengan Grunt.js (0.3.x)
sumber