Вопрос 1:

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

Вопрос 2:

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

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, который следует использовать для развертывания файлов на сервере. В любом случае, это можно сделать по-разному, в зависимости от предпочитаемого вами процесса сборки.

Если вы 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 вы можете просто обновлять при необходимости ... проще, я думаю.

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

1. Используйте npm / bower для установки начальной загрузки, если вы хотите перекомпилировать его / изменить меньше файлов / test. С grunt было бы легче сделать это, как показано на http://getbootstrap.com/getting-started/#grunt . Если вы хотите добавить только предварительно скомпилированные библиотеки, не стесняйтесь вручную включать файлы в проект.

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