Tujuan menginstal Bootstrap Twitter melalui npm?

233

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?

James Fazio
sumber
9
Kasus penggunaan utama yang dapat saya pikirkan adalah menggunakan Browserify untuk pengembangan JS frontend Anda.
cvrebert
1
@cvrebert: terima kasih telah memberikan jawaban tl; dr :)
Ivan Durst

Jawaban:

143
  1. 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, jqueryperpustakaan 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 requiremenggunakan browserify , yang merupakan kasus penggunaan yang paling mungkin dan, seperti yang saya pahami, alasan utama bootstrap dipublikasikan pada npm.

  2. Bagaimana cara menggunakannya

    Bayangkan struktur proyek berikut:

    proyek
    | - node_modules
    | - publik
    | | - css
    | | - img
    | | - js
    | | - index.html
    | - package.json
    
    

Di Anda, index.htmlAnda dapat mereferensikan keduanya cssdan jsfile seperti ini:

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Yang merupakan cara paling sederhana, dan benar untuk .cssfile. Tetapi jauh lebih baik untuk memasukkan bootstrap.jsfile seperti ini di suatu tempat di public/js/*.jsfile Anda :

var bootstrap = require('bootstrap');

Dan Anda memasukkan kode ini hanya dalam javascriptfile - file di mana Anda benar-benar membutuhkan bootstrap.js. Browserify akan mengurus termasuk file ini untuk Anda.

Sekarang, kekurangannya adalah Anda sekarang memiliki file front-end Anda sebagai node_modulesdependensi, dan node_modulesfolder biasanya tidak diperiksa git. 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:

const bootstrap = require('bootstrap');

Adapun cssfile, Webpack telah disebut " loader ". Mereka memungkinkan Anda menulis ini dalam kode js Anda:

require('bootstrap/dist/css/bootstrap.css');

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 sebagai cssfile terpisah . Anda dapat membaca lebih lanjut tentang itu di dokumentasi webpack.

Kesimpulannya.

  1. Anda harus "membundel" kode aplikasi Anda dengan bundler
  2. Anda tidak boleh melakukan node_modulesatau file yang dibangun secara dinamis untuk git. Anda dapat menambahkan buildskrip ke npm yang harus digunakan untuk menyebarkan file di server. Bagaimanapun, ini dapat dilakukan dengan berbagai cara tergantung pada proses pembuatan yang Anda inginkan.
timetowonder
sumber
1
Saya hanya melakukan ini tetapi terus mendapatkan localhost: 3000 / bootstrap 404 (Tidak Ditemukan), ada pemikiran tentang ini?
emerak
Saya akan mengatakan bahwa "kemungkinannya tinggi bahwa, misalnya, perpustakaan jquery CDN yang digunakan situs Anda telah diunduh oleh peramban pengguna" adalah berlebihan
Saya harus mengatakan bahwa jawaban webpack sudah benar. Tetapi untuk menjawab pertanyaan OP: Tidak ada cara yang rapi untuk menguji apakah skrip / stylesheet dimuat. HTTP / 2 dapat menyelesaikan masalah ini dengan multiplexing. Tetapi sebagian besar, Anda dapat menggunakan webpack dan deferatribut pada skrip Anda atau memuat file dengan malas
Tamb
187

Jika Anda NPM modul-modul itu, Anda bisa menayangkannya menggunakan redirect statis.

Pertama instal paket:

npm install jquery
npm install bootstrap

Kemudian di server.js:

var express = require('express');
var app = express();

// prepare server
app.use('/api', api); // redirect API calls
app.use('/', express.static(__dirname + '/www')); // redirect root
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap

Lalu, akhirnya, di .html:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

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.

Augusto Goncalves
sumber
2
Bagi mereka yang bekerja dengan proyek simpul cepat yang dihasilkan oleh badai web, Anda perlu menambahkan kode di app.js Anda
kemicofa ghost
Saya tidak pernah mengusulkan menjaga file front-end statis bersama dengan file server.
timetowonder
Apakah Anda melakukan panggilan ke aplikasi saat memuat file js atau di dalam handler siap?
pupeno
@Pablo, saya menggunakannya di awal, sama seperti dalam cuplikan kode.
Augusto Goncalves
1
Bagaimana /jsrute yang sama dapat mengarahkan ulang ke dua direktori yang terpisah? Bagaimana cara menangani file yang saling bertentangan di masing-masing?
Jacob Ford
72

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.

mfrachet
sumber
5
Anda dapat menggunakan perintah salin dan menyebutnya melalui menjalankan npm , tugas kasar , atau tugas menelan . Melakukan ini, saya tidak perlu sumber mengontrol direktori "node_modules" (panggil saja "npm install" ketika membangun / menyebarkan), dan saya dapat merujuk "gaya / bootstrap.min.css" daripada "./node_modules/bootstrap /bootstrap.min.css ".
Bless Yahu
Jika ada kelemahan untuk menyalin file, tentu saja Anda akan memiliki dua salinan dependensi di repo Anda. Metode redirect statis yang disebutkan oleh @augusto terlihat lebih efisien.
estaples
3
  1. 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.

  2. 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)

7 lebih baik
sumber