Цель установки Twitter Bootstrap через npm?

233

Вопрос 1:

Какова цель установки Twitter Bootstrap через npm? Я думал, что npm предназначен для модулей на стороне сервера. Быстрее ли обслуживать загрузочные файлы самостоятельно, чем при использовании CDN?

Вопрос 2:

Если бы я npm установил Bootstrap, как бы я указал на файлы bootstrap.js и bootstrap.css?

Джеймс Фацио
источник
9
Основной вариант использования, который я могу придумать, - это использовать Browserify для разработки JS-интерфейса.
cvrebert
1
@cvrebert: спасибо за ответ tl; dr :)
Иван Дерст

Ответы:

143
  1. Смысл использования CDN заключается в том, что он быстрее , во-первых, потому что это распределенная сеть, а во-вторых, потому что статические файлы кэшируются браузерами и высоки шансы, например, jqueryбиблиотеки CDN, что ваш сайт Пользователь уже загружал браузер пользователя, и, следовательно, файл был кэширован, и, следовательно, ненужная загрузка не происходит. Тем не менее, это все еще хорошая идея, чтобы обеспечить запасной вариант .

    Теперь точка загрузки пакета npm

    является то, что он предоставляет файл Javascript начальной загрузки в качестве модуля . Как было упомянуто выше, это дает ему возможность requireиспользовать browserify , который является наиболее вероятным вариантом использования и, как я понимаю, основной причиной публикации загрузчика на npm.

  2. Как это использовать

    Представьте себе следующую структуру проекта:

    проект
    | - node_modules
    | - общедоступный
    | | - css
    | | - img
    | | - JS
    | | - index.html
    | - package.json
    
    

В вашем index.htmlвы можете ссылаться как на файлы, так cssи на jsтакие:

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

Какой самый простой способ и правильный для .cssфайлов. Но гораздо лучше включить такой bootstrap.jsфайл в ваши public/js/*.jsфайлы:

var bootstrap = require('bootstrap');

И вы включаете этот код только в те javascriptфайлы, которые вам действительно нужны bootstrap.js. Browserify позаботится о включении этого файла для вас.

Недостатком является то, что теперь у вас есть внешние файлы в качестве node_modulesзависимостей, и node_modulesпапка обычно не регистрируется git. Я думаю, что это самая противоречивая часть, со многими мнениями и решениями .


ОБНОВЛЕНИЕ март 2017

Прошло почти два года с тех пор, как я написал этот ответ, и обновление уже на месте.

Теперь общепринятым способом является использование такого пакета, как WebPack (или другой Bundler выбора) , чтобы связать все свои активы на стадии сборки.

Во-первых, он позволяет вам использовать синтаксис commonjs точно так же, как browserify, поэтому, чтобы включить загрузочный код js в ваш проект, вы делаете то же самое:

const bootstrap = require('bootstrap');

Что касается cssфайлов, в webpack есть так называемые « загрузчики ». Они позволяют вам написать это в своем коде JS:

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

и CSS-файлы будут «волшебным образом» включены в вашу сборку. Они будут динамически добавляться в виде <style />тегов при запуске приложения, но вы можете настроить веб-пакет для экспорта их в виде отдельного cssфайла. Вы можете прочитать больше об этом в документации веб-пакета.

В заключение.

  1. Вы должны «связать» код своего приложения с помощью упаковщика
  2. Вы не должны фиксировать ни node_modulesgit, ни динамически создаваемые файлы. Вы можете добавить buildскрипт в npm, который следует использовать для развертывания файлов на сервере. В любом случае, это можно сделать по-разному, в зависимости от предпочитаемого вами процесса сборки.
timetowonder
источник
1
Я только что сделал это, но продолжаю получать localhost: 3000 / bootstrap 404 (Not Found), есть какие-нибудь мысли по этому поводу?
emerak
Я бы сказал, что «велика вероятность того, что, например, библиотека jquery CDN, которую использует ваш сайт, уже загружена браузером пользователя» - преувеличение
Я должен сказать, что ответ веб-пакета является правильным. Но чтобы ответить на вопрос OP: нет точного способа проверить, загружен ли скрипт / таблица стилей. HTTP / 2 может решить эти проблемы с мультиплексированием. Но по большей части вы можете использовать webpack и deferатрибуты в ваших скриптах или ленивые загрузочные файлы
Tamb
187

Если вы NPM эти модули, вы можете обслуживать их с помощью статического перенаправления.

Сначала установите пакеты:

npm install jquery
npm install bootstrap

Затем на сервере .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

Тогда, наконец, на .html:

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

Я бы не обслуживал страницы непосредственно из папки, где находится файл server.js (который обычно совпадает с node_modules), так как предложено timetowonder , чтобы люди могли получить доступ к вашему файлу server.js.

Конечно, вы можете просто загружать, копировать и вставлять в свою папку, но с помощью NPM вы можете просто обновлять при необходимости ... проще, я думаю.

Аугусто Гонсалвес
источник
2
Для тех, кто работает с проектом экспресс-узла, сгенерированным веб-штормом, вам нужно добавить код в ваш app.js
kemicofa ghost
Я никогда не предлагал хранить статические входные файлы вместе с файлами на сервере.
timetowonder
Вы делаете эти вызовы к приложению, загружая файл js или в готовом обработчике?
Пупено
@Pablo, я использую его в самом начале, как во фрагменте кода.
Аугусто Гонсалвес
1
Как можно /jsперенаправить один и тот же маршрут в два отдельных каталога? Как бы он обрабатывал конфликтующие файлы в каждом?
Джейкоб Форд
72

Ответ 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", если я не ошибаюсь.

mfrachet
источник
5
Вы можете использовать команду копирования и вызывать ее через запуск npm , задачу grunt или gulp . При этом мне не нужно управлять исходным кодом каталога «node_modules» (просто вызывайте «npm install» при сборке / развертывании), и я могу ссылаться на «styles / bootstrap.min.css» вместо «./node_modules/bootstrap». /bootstrap.min.css».
Благослови Яху
Если копирование файлов имеет обратную сторону, то естественно, что в вашем репо будет две копии этих зависимостей. Метод статического перенаправления, упомянутый @augusto, выглядит более эффективным.
Estaples
3
  1. Используйте npm / bower для установки начальной загрузки, если вы хотите перекомпилировать его / изменить меньше файлов / test. С grunt было бы легче сделать это, как показано на http://getbootstrap.com/getting-started/#grunt . Если вы хотите добавить только предварительно скомпилированные библиотеки, не стесняйтесь вручную включать файлы в проект.

  2. Нет, вы должны сделать это самостоятельно или использовать отдельный инструмент grunt. Например, 'grunt-contrib-concat' Как объединить и минимизировать несколько файлов CSS и JavaScript с помощью Grunt.js (0.3.x)

7affer
источник