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?

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.

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.

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.

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)