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?
Odpowiedzi:
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
jquery
biblioteka, ż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
require
jest przy użyciu browserify , który jest najprawdopodobniej przypadek użycia i, jak rozumiem, głównym powodem bootstrap publikowane na KMP.Jak tego użyć
Wyobraź sobie następującą strukturę projektu:
W twoim
index.html
możesz odwoływać się zarównocss
dojs
plików, jak i do takich:Który jest najprostszy i popraw
.css
pliki. Ale o wiele lepiej jest umieścić takibootstrap.js
plik gdzieś w swoichpublic/js/*.js
plikach:I dołączasz ten kod tylko do tych
javascript
plików, w których naprawdę potrzebujeszbootstrap.js
. Browserify zajmuje się dołączeniem tego pliku.Wadą jest to, że masz teraz pliki interfejsu jako
node_modules
zależności, anode_modules
folder 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:
Co do
css
plików, WebPack jest tak zwane „ ładowarki ”. Pozwalają ci napisać to w kodzie js: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 osobnycss
plik. Możesz przeczytać więcej na ten temat w dokumentacji pakietu.Podsumowując
node_modules
git, ani dynamicznie budowanych plików. Możesz dodaćbuild
skrypt 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.źródło
defer
atrybutu w swoich skryptach lub leniwych plikach ładującychJeśli NPM te moduły, możesz obsłużyć je za pomocą przekierowania statycznego.
Najpierw zainstaluj pakiety:
Następnie na server.js:
Następnie, na końcu .html:
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ę.
źródło
/js
trasa może przekierowywać do dwóch oddzielnych katalogów? Jak poradziłby sobie z konfliktowymi plikami w każdym z nich?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ę.
źródło
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.
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)
źródło