Soru 1:

Twitter Bootstrap'ı npm aracılığıyla yüklemenin amacı tam olarak nedir? Ben npm sunucu tarafı modülleri için olduğunu düşündüm. Önyükleme dosyalarını kendiniz sunmak bir CDN kullanmaktan daha mı hızlı?

Soru 2:

Bootstrap'i npm kuracak olsaydım, bootstrap.js ve bootstrap.css dosyalarına nasıl işaret ederdim?

1. CDN kullanmanın amacı , her şeyden önce daha hızlı olmasıdır , çünkü dağıtılmış bir ağdır, ancak ikincisi, statik dosyalar tarayıcılar tarafından önbelleğe alınır ve örneğin, jquerysitenizin CDN'nin kütüphanesi olan olasılıkları yüksektir. kullanımları kullanıcının tarayıcısı tarafından zaten indirilmişti ve bu nedenle dosya önbelleğe alınmıştı ve bu nedenle gereksiz bir indirme gerçekleşmiyor. Bununla birlikte, bir geri dönüş sağlamak hala iyi bir fikirdir .

   Şimdi, bootstrap'ın npm paketinin noktası

   modül olarak bootstrap'ın javascript dosyasını sağlamasıdır . Yukarıda belirtildiği gibi olup, bu mümkün hale getirir onu kullanarak browserify Anladığım kadarıyla, bootstrap temel nedeni NPM yayımlanmasına, büyük olasılıkla kullanım durumunda olan ve.require

2. Bu nasıl kullanılır

   Aşağıdaki proje yapısını düşünün:

   proje
   | - düğüm_modülleri
   | - kamu
   | | - css
   | | - img
   | | - js
   | | - index.html
   | - package.json
   
   

Gözlerinde farklı index.htmlhem referans verebilir cssve jsbu gibi dosyaları:

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

Hangi en basit yol ve .cssdosyalar için doğru . Ancak bootstrap.jsdosyayı böyle bir yere public/js/*.jsdosyalarınıza eklemek çok daha iyidir :

var bootstrap = require('bootstrap');

Ve bu kodu yalnızca javascriptgerçekten ihtiyacınız olan dosyalara eklersiniz bootstrap.js. Browserify bu dosyayı sizin için ekler.

Şimdi dezavantaj, artık ön uç dosyalarınızı node_modulesbağımlılık olarak görmeniz ve node_modulesklasörün genellikle teslim edilmemesi git. Bence bu, birçok fikir ve çözümle en tartışmalı kısım .

GÜNCELLEME Mart 2017

Bu cevabı yazdığımdan beri yaklaşık iki yıl geçti ve bir güncelleme var.

Şimdi genel olarak kabul edilen yol, tüm öğelerinizi oluşturma adımında paketlemek için webpack (veya seçtiğiniz başka bir paketleyici) gibi bir paketleyici kullanmaktır .

İlk olarak, browserify gibi commonjs sözdizimini kullanmanıza izin verir, böylece projenize bootstrap js kodunu dahil etmek için aynı şeyi yaparsınız:

const bootstrap = require('bootstrap');

cssDosyalara gelince , webpack " yükleyiciler " olarak adlandırılmıştır . Bunu js kodunuza yazmanıza izin verir:

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

ve css dosyaları derlemenize "sihirli bir şekilde" dahil edilecektir. <style />Uygulamanız çalıştığında dinamik olarak etiket olarak eklenirler , ancak web paketini ayrı bir cssdosya olarak dışa aktarmak için yapılandırabilirsiniz . Bununla ilgili daha fazla bilgiyi webpack'in belgelerinde okuyabilirsiniz.

Sonuç olarak.

1. Uygulama kodunuzu bir paketleyiciyle "paketlemelisiniz"
2. node_modulesGit için ne dinamik olarak oluşturulmuş dosyaları işlememelisiniz . buildNpm'ye dosyaları sunucuya dağıtmak için kullanılması gereken bir komut dosyası ekleyebilirsiniz . Her neyse, bu tercih ettiğiniz derleme işlemine bağlı olarak farklı şekillerde yapılabilir.

Bu modülleri NPM yaparsanız, statik yönlendirmeyi kullanarak bunları sunabilirsiniz.

İlk önce paketleri kurun:

npm install jquery
npm install bootstrap

Sonra server.js üzerinde:

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

Son olarak, .html'de:

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

Sayfaları timetowonder tarafından önerildiği gibi server.js dosyanızın (genellikle node_modules ile aynıdır) olduğu klasörden doğrudan sunmam , böylece insanlar server.js dosyanıza erişebilir.

Tabii ki klasörünüzü indirip kopyalayıp yapıştırabilirsiniz, ancak NPM ile gerektiğinde güncelleyebilirsiniz ... daha kolay, sanırım.

Cevap 1:

• Npm (veya bower) aracılığıyla bootstrap indirmek, gecikme süresi kazanmanızı sağlar. Uzak bir kaynak almak yerine, yerel bir kaynak alırsınız, bir cdn kullanmanız dışında daha hızlıdır (aşağıdaki cevabı kontrol edin)

• "npm" başlangıçta Düğüm Modülünü almaktı, ama Javascript dilinin (ve browserify'nin gelişinin) eseriyle biraz büyüdü. Aslında, AngularJS'yi npm'de indirebilirsiniz, bu bir sunucu tarafı çerçevesi değildir. Browserify, istemci tarafında düğüm modüllerinin kullanılabilmesi için istemci tarafında AMD / RequireJS / CommonJS kullanmanıza izin verir.

Cevap 2:

Npm bootstrap yüklerseniz (bir dist klasörüne taşımak için belirli bir homurdanma veya gulp dosyası kullanmazsanız), yanlış olmazsam bootstrap'ınız "./node_modules/bootstrap/bootstrap.min.css" içinde bulunur.

1. Yeniden derlemek / daha az dosya / test değiştirmek istiyorsanız, bootstrap yüklemek için npm / bower komutunu kullanın. Grunt ile http://getbootstrap.com/getting-started/#grunt ' da gösterildiği gibi bunu yapmak daha kolay olurdu . Sadece önceden derlenmiş kitaplıklar eklemek istiyorsanız, dosyaları projeye manuel olarak dahil etmekten çekinmeyin.

2. Hayır, bunu kendiniz yapmanız veya ayrı bir homurdanma aracı kullanmanız gerekir. Örneğin, 'grunt-antid-concat' Grunt.js (0.3.x) ile birden çok CSS ve JavaScript dosyasını nasıl birleştirir ve küçültür