Вопрос 1:
Какова цель установки Twitter Bootstrap через npm? Я думал, что npm предназначен для модулей на стороне сервера. Быстрее ли обслуживать загрузочные файлы самостоятельно, чем при использовании CDN?
Вопрос 2:
Если бы я npm установил Bootstrap, как бы я указал на файлы bootstrap.js и bootstrap.css?
Ответы:
Смысл использования CDN заключается в том, что он быстрее , во-первых, потому что это распределенная сеть, а во-вторых, потому что статические файлы кэшируются браузерами и высоки шансы, например,
jquery
библиотеки CDN, что ваш сайт Пользователь уже загружал браузер пользователя, и, следовательно, файл был кэширован, и, следовательно, ненужная загрузка не происходит. Тем не менее, это все еще хорошая идея, чтобы обеспечить запасной вариант .Теперь точка загрузки пакета npm
является то, что он предоставляет файл Javascript начальной загрузки в качестве модуля . Как было упомянуто выше, это дает ему возможность
require
использовать browserify , который является наиболее вероятным вариантом использования и, как я понимаю, основной причиной публикации загрузчика на npm.Как это использовать
Представьте себе следующую структуру проекта:
В вашем
index.html
вы можете ссылаться как на файлы, такcss
и наjs
такие:Какой самый простой способ и правильный для
.css
файлов. Но гораздо лучше включить такойbootstrap.js
файл в вашиpublic/js/*.js
файлы:И вы включаете этот код только в те
javascript
файлы, которые вам действительно нужныbootstrap.js
. Browserify позаботится о включении этого файла для вас.Недостатком является то, что теперь у вас есть внешние файлы в качестве
node_modules
зависимостей, иnode_modules
папка обычно не регистрируетсяgit
. Я думаю, что это самая противоречивая часть, со многими мнениями и решениями .ОБНОВЛЕНИЕ март 2017
Прошло почти два года с тех пор, как я написал этот ответ, и обновление уже на месте.
Теперь общепринятым способом является использование такого пакета, как WebPack (или другой Bundler выбора) , чтобы связать все свои активы на стадии сборки.
Во-первых, он позволяет вам использовать синтаксис commonjs точно так же, как browserify, поэтому, чтобы включить загрузочный код js в ваш проект, вы делаете то же самое:
Что касается
css
файлов, в webpack есть так называемые « загрузчики ». Они позволяют вам написать это в своем коде JS:и CSS-файлы будут «волшебным образом» включены в вашу сборку. Они будут динамически добавляться в виде
<style />
тегов при запуске приложения, но вы можете настроить веб-пакет для экспорта их в виде отдельногоcss
файла. Вы можете прочитать больше об этом в документации веб-пакета.В заключение.
node_modules
git, ни динамически создаваемые файлы. Вы можете добавитьbuild
скрипт в npm, который следует использовать для развертывания файлов на сервере. В любом случае, это можно сделать по-разному, в зависимости от предпочитаемого вами процесса сборки.источник
defer
атрибуты в ваших скриптах или ленивые загрузочные файлыЕсли вы NPM эти модули, вы можете обслуживать их с помощью статического перенаправления.
Сначала установите пакеты:
Затем на сервере .js:
Тогда, наконец, на .html:
Я бы не обслуживал страницы непосредственно из папки, где находится файл server.js (который обычно совпадает с node_modules), так как предложено timetowonder , чтобы люди могли получить доступ к вашему файлу server.js.
Конечно, вы можете просто загружать, копировать и вставлять в свою папку, но с помощью NPM вы можете просто обновлять при необходимости ... проще, я думаю.
источник
/js
перенаправить один и тот же маршрут в два отдельных каталога? Как бы он обрабатывал конфликтующие файлы в каждом?Ответ 1:
Загрузка начальной загрузки через npm (или bower) позволяет вам получить некоторое время ожидания. Вместо того, чтобы получить удаленный ресурс, вы получаете локальный, он быстрее, за исключением случаев, когда вы используете cdn (проверьте ответ ниже)
Изначально «npm» предназначался для получения Node Module, но с появлением языка Javascript (и появлением browserify) он немного вырос. Фактически, вы можете даже загрузить AngularJS на npm, который не является фреймворком на стороне сервера. Browserify позволяет вам использовать AMD / RequireJS / CommonJS на стороне клиента, чтобы узлы модуля можно было использовать на стороне клиента.
Ответ 2:
Если вы загрузите npm при установке начальной загрузки (если вы не используете конкретный файл grunt или gulp для перемещения в папку dist), ваша начальная загрузка будет расположена в "./node_modules/bootstrap/bootstrap.min.css", если я не ошибаюсь.
источник
Используйте npm / bower для установки начальной загрузки, если вы хотите перекомпилировать его / изменить меньше файлов / test. С grunt было бы легче сделать это, как показано на http://getbootstrap.com/getting-started/#grunt . Если вы хотите добавить только предварительно скомпилированные библиотеки, не стесняйтесь вручную включать файлы в проект.
Нет, вы должны сделать это самостоятельно или использовать отдельный инструмент grunt. Например, 'grunt-contrib-concat' Как объединить и минимизировать несколько файлов CSS и JavaScript с помощью Grunt.js (0.3.x)
источник