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

Вопрос 1:

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

Вопрос 2:

Если бы я должен был npm установить Bootstrap, как бы я указал на bootstrap.JS и ушко.файлы css?

190
cdn express node.js npm twitter-bootstrap

4 ответов

  1. смысл использования CDN заключается в том, что это быстрее, прежде всего, потому что это распределенные сеть, но во-вторых, потому что статические файлы кэшируются браузерами и велики шансы, что, например, CDN jquery библиотека, которую использует ваш сайт, уже была загружена браузером пользователя, и поэтому файл был кэширован, и поэтому ненужная загрузка не происходит. Это, как говорится, все равно хорошая идея!--30-->чтобы обеспечить резерв.

    теперь, точка пакета npm bootstrap

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

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

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

    project
|-- node_modules
|-- public
|   |-- 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, поэтому для включения кода bootstrap js в ваш проект вы делаете то же самое:

const bootstrap = require('bootstrap');

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

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

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

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

  1. вы должны "связывать" свой код приложения с bundler
  2. вы не должны совершать ни того, ни другого node_modules ни динамически встроенные файлы для git. Вы можете добавить build скрипт для npm, который должен использоваться для развертывания файлов на сервере. В любом случае, это можно сделать по-разному в зависимости от предпочтительного процесса сборки.
117

Если вы 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>

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

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

165

ответ 1:

  • загрузка bootstrap через npm (или bower) позволяет получить некоторое время задержки. Вместо того, чтобы получить удаленный ресурс, вы получаете локальный, это быстрее, за исключением того, если вы используете cdn (проверьте ниже Ответ)

  • "npm" изначально должен был получить модуль Node, но с появлением языка Javascript (и появлением browserify) он немного вырос. Фактически, вы даже можете скачать AngularJS на npm, это не серверная платформа. Browserify позволяет использовать AMD/RequireJS / CommonJS на стороне клиента, поэтому модули узлов могут использоваться на стороне клиента.

ответ 2:

Если вы устанавливаете загрузочный файл npm (если вы не используете конкретный файл grunt или gulp для перемещения в папку dist), ваш загрузочный файл будет расположен в "./папки node_modules/ушко/ушко.минута.css " если я не ошибаюсь.

71

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

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

3