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?

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.

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ę.

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ę.

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)