Czy chcesz zainstalować Twitter Bootstrap przez npm?

233

Pytanie 1:

Jaki jest dokładnie cel instalacji Bootstrap na Twitterze za pośrednictwem npm? Myślałem, że npm był przeznaczony dla modułów po stronie serwera. Czy szybsze jest samodzielne podawanie plików bootstrap niż korzystanie z CDN?

Pytanie 2:

Gdybym miał npm zainstalować Bootstrap, jak mam wskazać pliki bootstrap.js i bootstrap.css?

James Fazio
źródło
9
Głównym przykładem użycia, jaki mogę wymyślić, jest użycie Browserify do programowania JS frontonu.
cvrebert,
1
@cvrebert: dzięki za udzielenie odpowiedzi tl; dr :)
Ivan Durst

Odpowiedzi:

143
  1. Punktem użyciu CDN jest to, że szybciej , przede wszystkim dlatego, że jest rozprowadzany siecią, ale po drugie, ponieważ pliki statyczne są buforowane przez przeglądarkę, a szanse są wysokie, że, na przykład, CDN jest jquerybiblioteka, że strona użycie zostało już pobrane przez przeglądarkę użytkownika, a zatem plik został buforowany, a zatem niepotrzebne jest pobieranie. Biorąc to pod uwagę, nadal dobrym pomysłem jest zapewnienie rezerwy .

    Teraz punkt pakietu npm bootstrap

    jest to, że zapewnia on plik javascript bootstrap jako moduł . Jak już wspomniano powyżej, to sprawia, że możliwe requirejest przy użyciu browserify , który jest najprawdopodobniej przypadek użycia i, jak rozumiem, głównym powodem bootstrap publikowane na KMP.

  2. Jak tego użyć

    Wyobraź sobie następującą strukturę projektu:

    projekt
    | - moduły_węzła
    | - publiczny
    | | - css
    | | - img
    | | - js
    | | - index.html
    | - pakiet.json
    
    

W twoim index.htmlmożesz odwoływać się zarówno cssdo jsplików, jak i do takich:

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

Który jest najprostszy i popraw .csspliki. Ale o wiele lepiej jest umieścić taki bootstrap.jsplik gdzieś w swoich public/js/*.jsplikach:

var bootstrap = require('bootstrap');

I dołączasz ten kod tylko do tych javascriptplików, w których naprawdę potrzebujesz bootstrap.js. Browserify zajmuje się dołączeniem tego pliku.

Wadą jest to, że masz teraz pliki interfejsu jako node_moduleszależności, a node_modulesfolder zwykle nie jest rejestrowany za pomocą git. Myślę, że jest to najbardziej kontrowersyjna część, z wieloma opiniami i rozwiązaniami .


AKTUALIZACJA Marzec 2017

Minęły prawie dwa lata, odkąd napisałem tę odpowiedź, i aktualizacja jest na miejscu.

Teraz powszechnie akceptowanym sposobem jest użycie Bundler jak WebPack (lub inny Bundler wyboru), aby zawierać wszystkie swoje aktywa na etapie kompilacji.

Po pierwsze, pozwala na użycie składni commonjs podobnie jak browserify, więc aby dołączyć kod js bootstrap do swojego projektu, wykonaj to samo:

const bootstrap = require('bootstrap');

Co do cssplików, WebPack jest tak zwane „ ładowarki ”. Pozwalają ci napisać to w kodzie js:

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

a pliki css będą „magicznie” zawarte w twojej kompilacji. Będą one dynamicznie dodawane jako <style />tagi podczas działania aplikacji, ale możesz skonfigurować webpack, aby eksportował je jako osobny cssplik. Możesz przeczytać więcej na ten temat w dokumentacji pakietu.

Podsumowując

  1. Powinieneś „powiązać” swój kod aplikacji z pakietem
  2. Nie powinieneś zatwierdzać ani node_modulesgit, ani dynamicznie budowanych plików. Możesz dodać buildskrypt do npm, który powinien zostać użyty do wdrożenia plików na serwerze. W każdym razie można to zrobić na różne sposoby, w zależności od preferowanego procesu kompilacji.
harmonogramowonder
źródło
1
Właśnie to zrobiłem, ale wciąż otrzymuję localhost: 3000 / bootstrap 404 (nie znaleziono), jakieś przemyślenia na ten temat?
emerak
Powiedziałbym, że „istnieje duża szansa, że ​​na przykład biblioteka jQuery CDN, z której korzysta twoja strona, została już pobrana przez przeglądarkę użytkownika” to przesada
Muszę powiedzieć, że odpowiedź pakietu internetowego jest poprawna. Ale aby odpowiedzieć na pytanie OP: Nie ma ładnego sposobu na sprawdzenie, czy skrypt / arkusz stylów został załadowany. HTTP / 2 może rozwiązać te problemy z multipleksowaniem. Ale w przeważającej części możesz użyć webpacka i deferatrybutu w swoich skryptach lub leniwych plikach ładujących
Tamb
187

Jeśli NPM te moduły, możesz obsłużyć je za pomocą przekierowania statycznego.

Najpierw zainstaluj pakiety:

npm install jquery
npm install bootstrap

Następnie na 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

Następnie, na końcu .html:

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

Nie wyświetlałbym stron bezpośrednio z folderu, w którym znajduje się plik server.js (który zwykle jest taki sam jak moduły node_modu), zgodnie z propozycją harmonogramu , w ten sposób ludzie mogą uzyskać dostęp do pliku server.js.

Oczywiście możesz po prostu pobrać i skopiować i wkleić folder, ale dzięki NPM możesz po prostu aktualizować w razie potrzeby ... łatwiej, myślę.

Augusto Goncalves
źródło
2
Dla osób pracujących z projektem węzła ekspresowego wygenerowanego przez burzę internetową, musisz dodać kod do swojej aplikacji.js
kemicofa ghost
Nigdy nie proponowałem trzymania statycznych plików interfejsu użytkownika razem z plikami serwera.
timetowonder
Czy wykonujesz te wywołania do aplikacji podczas ładowania pliku js lub w gotowym module obsługi?
pupeno
@Pablo, używam go na samym początku, tak jak we fragmencie kodu.
Augusto Goncalves,
1
Jak ta sama /jstrasa może przekierowywać do dwóch oddzielnych katalogów? Jak poradziłby sobie z konfliktowymi plikami w każdym z nich?
Jacob Ford
72

Odpowiedź 1:

  • Pobieranie bootstrap przez npm (lub altanę) pozwala uzyskać pewien czas oczekiwania. Zamiast uzyskiwać zdalny zasób, dostajesz zasób lokalny, jest on szybszy, chyba że używasz cdn (sprawdź poniżej odpowiedź)

  • „npm” miał pierwotnie mieć moduł węzła, ale wraz z eserem języka JavaScript (i pojawieniem się browserrify), trochę się rozwinął. W rzeczywistości możesz nawet pobrać AngularJS na npm, który nie jest strukturą po stronie serwera. Browserify pozwala na użycie AMD / RequireJS / CommonJS po stronie klienta, dzięki czemu moduły węzłów mogą być używane po stronie klienta.

Odpowiedź 2:

Jeśli npm zainstalujesz bootstrap (jeśli nie użyjesz konkretnego pliku chrząknięcia lub przełknięcia, aby przenieść się do folderu dist), twój bootstrap znajdzie się w „./node_modules/bootstrap/bootstrap.min.css”, jeśli się nie mylę.

mfrachet
źródło
5
możesz użyć polecenia kopiowania i wywołać je za pomocą polecenia npm , zadania chrząknięcia lub zadania przełykania . W tym celu nie muszę kontrolować źródła w katalogu „node_modules” (wystarczy wywołać „npm install” podczas budowania / wdrażania) i mogę odwoływać się do „styles / bootstrap.min.css” zamiast „./node_modules/bootstrap /bootstrap.min.css ”.
Pobłogosław Yahu
Jeśli kopiowanie plików ma wadę, naturalnie będziesz mieć dwie kopie tych zależności w repozytorium. Metoda statycznego przekierowania wymieniona przez @augusto wygląda na bardziej wydajną.
estaples
3
  1. Użyj npm / bower, aby zainstalować bootstrap, jeśli chcesz go ponownie skompilować / zmienić mniej plików / przetestować. Z pomrukiem byłoby łatwiej to zrobić, jak pokazano na http://getbootstrap.com/getting-started/#grunt . Jeśli chcesz tylko dodać wstępnie skompilowane biblioteki, możesz ręcznie dołączyć pliki do projektu.

  2. Nie, musisz to zrobić sam lub użyć osobnego narzędzia do chrząkania. Na przykład „grunt-contrib-concat” Jak połączyć i zminimalizować wiele plików CSS i JavaScript za pomocą Grunt.js (0.3.x)

7affer
źródło