Как включить Bootstrap в проект Node

У меня есть проект стека MEAN, который был подкрашен, используя основную команду npm. В настоящий момент Bootstrap включен с использованием CDN:

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')

Мой вопрос заключается в том, как добавить бутстрап, используя npm, чтобы проект работал так же, как и с включением CDN. В частности, когда я запускаю

npm install bootstrap

в файле node_modules создается каталог boostrap. Однако, если я попытаюсь включить bootstrap.css из этого каталога, он сломает глификонные шрифты. Может ли кто-нибудь посоветовать, как это сделать?

P.S. Я бы тоже поставил тот же вопрос относительно самого AngularJS.

Ответ 1

Вы можете использовать диспетчер пакетов браузера i.e bower

Bower предлагает общее, неопроверенное решение проблемы управления интерфейсом переднего плана, а также демонстрирует модель зависимости от пакета через API, который может потребляться более самоуверенным стеком сборки. Системных зависимостей нет, между разными приложениями не используются зависимости, а дерево зависимостей - плоское.

Если вы хотите узнать больше о том, что лучше и надежнее, вы также читаете эту ссылку .

Почему не npm

Основное различие между npm и Bower - это подход для установки зависимостей пакетов. npm устанавливает зависимости для каждого пакета отдельно и в результате создает большое дерево зависимостей пакета (node_modules/grunt/node_modules/glob/node_modules/...), где может быть несколько версий одного и того же пакета. Для клиентского JavaScript это неприемлемо: вы не можете добавить две разные версии для jQuery или любой другой библиотеки на страницу. С Bower каждый пакет устанавливается один раз (jQuery всегда будет находиться в папке bower_components/jquery, независимо от того, сколько пакетов зависит от него), а в случае конфликта зависимости Bower просто не будет устанавливать пакет, несовместимый с тем, который уже установлен.

Установка Bower

Вы просто устанавливаете пакеты

Синтаксис

npm install -g bower

Вы можете сослаться на Doc.

Пример:

Структура каталогов

project Folder
  + bower_components
     + bootstrap
       + dist
         + css
           + bootstrap.css
     + jquery
       + jquery.js
  + public
    + index.html
  + app.js

Теперь вы можете установить статический путь в app.js

app.use(express.static(path.join(__dirname, 'bower_components')));

Теперь вы можете просто использовать свой файл index.html

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' />
</head>
<body>
{{{ yield }}}
</body>
<script src="/bootstrap/dist/jquery/jquery.js"></script>
</html>

Скриншоты

Структура каталогов с файлом app.js

Обычный файл HTML