Питання 1:

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

Питання 2:

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

1. Сенс використання CDN полягає в тому, що це швидше , по-перше, тому, що це розподілена мережа, а по-друге, тому, що статичні файли кешуються браузерами, і шанси вищі, ніж, наприклад, jqueryбібліотека CDN, що знаходиться на вашому веб-сайті Користувач уже завантажив браузер користувача, тому файл був кешований, тому не завантажується зайве. Незважаючи на це, це все-таки хороша ідея забезпечити резерв .

   Тепер суть npm-пакету bootstrap

   полягає в тому, що він надає файл JavaScript в якості модуля bootstrap як модуль . Як вже було сказано вище, це дає змогу зробити requireце за допомогою браузера , що є найімовірнішим випадком використання, і, наскільки я розумію, основною причиною завантаження завантажувальної програми в npm.

2. Як ним користуватися

   Уявіть таку структуру проекту:

   проект
   | - модулі node_
   | - громадські
   | | - css
   | | - імг
   | | - 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 має так звані " завантажувачі ". Вони дозволяють записати це у свій js-код:

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

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

На закінчення.

1. Вам слід "зв’язати" код програми з постачальником
2. Ви не повинні виконувати ні node_modulesgit, ні динамічно складені файли. Ви можете додати buildскрипт до npm, який слід використовувати для розгортання файлів на сервері. У будь-якому випадку це можна зробити по-різному, залежно від бажаного процесу збирання.

Якщо ви 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 ви можете просто оновити, коли потрібно ... простіше, я думаю.

Відповідь 1:

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

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

Відповідь 2:

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

1. Використовуйте npm / bower для встановлення завантажувальної програми, якщо ви хочете її перекомпілювати / змінити менше файлів / тесту. З грунтом це було б простіше, як показано на http://getbootstrap.com/getting-started/#grunt . Якщо ви хочете лише додати попередньо складені бібліотеки, сміливо вручну додайте файли до проекту.

2. Ні, ви повинні зробити це самостійно або використовувати окремий інструмент бурчання. Наприклад, 'grunt-contrib-concat' Як об'єднати та мінімізувати кілька файлів CSS та JavaScript за допомогою Grunt.js (0.3.x)