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

Вопрос 1:

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

Вопрос 2:

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

Ответы

Ответ 1

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

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

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

  • Как использовать его

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

    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 (или другого поставщика) для объединения всех ваших активов в шаг сборки.

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

const bootstrap = require('bootstrap');

Что касается файлов css, webpack имеет так называемый loaders". Они позволяют вам писать это в вашем js-коде:

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

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

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

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

Ответ 2

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

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

npm install jquery
npm install bootstrap

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

Ответ 3

Ответ 1:

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

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

Ответ 2:

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

Ответ 4