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

Вопрос 1:

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

Вопрос 2:

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

4 190
node.js npm twitter-bootstrap iis-express cdn

4 ответа:

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

    теперь, точка пакета 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

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

теперь общепринятым способом является использование bundler как webpack (или другой комплект по выбору), чтобы объединить все ваши активы на этапе сборки.

во-первых, он позволяет использовать синтаксис 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" изначально должен был получить модуль узла, но с essort языка Javascript (и появлением browserify) он немного вырос. На самом деле, вы даже можете скачать AngularJS на npm, это не серверная платформа. Browserify позволяет использовать AMD/RequireJS / CommonJS на стороне клиента, поэтому модули узлов могут использоваться на стороне клиента.

ответ 2:

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

71

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

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

3