Разница между NPM, Композитором и Бауэром в Ларавеле?

Question

Итак, в Laravel есть Composer, NPM и Bower, я знаю, что все они менеджеры деоэндэнса.

Composer - Это похоже на PHP зависимости, и список пакетов контролируется содержимым composer.json. Для установки пакетов вы можете добавить этот файл или запустить php composer install <package>.

NPM - Похоже, что он сфокусирован на зависимостях JavaScript, но при этом имеет огромное количество пакетов. Пакеты, установленные npm install, определяются содержимым файла package.json.

Bower - Насколько я знаю, это для интерфейсных пакетов?

В Laravel вы можете использовать все три, если хотите, но зачем вам использовать одну над другой в тех случаях, когда библиотеки доступны, скажем, как npm и composer?

Например, при установке Laravel у них есть два файла:

• app.js - основной js-файл вашего приложения
• bootstrap.js - файл, включенный в app.js для получения некоторых зависимостей

Это содержимое моего bootstrap.js в resources/js

window._ = require('lodash');
window.Popper = require('popper.js').default;

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('slick-carousel');
    require('isotope-layout/dist/isotope.pkgd.min.js');
    require('tablesorter/dist/js/jquery.tablesorter.combined.min.js');
} 

catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

В app.css У меня есть это:

/* 
 * This file takes all of the styling we need and compiles it into one nice CSS file.
 * You'll notice you can pull in anything from the node_modules folder use a Tiddle (~)
*/

@import '~bootstrap/dist/css/bootstrap.min.css'; // Bootstrap 3.3.7 CSS
@import '~slick-carousel/slick/slick.css';       // Slick Carousel base CSS

@import "variables";                             // Sass Variables

@import "partials/typography";                   // All from this point are from the partials folder
@import "partials/mixins";
@import "partials/helpers";
@import "partials/navigation";
@import "partials/breadcrumb-bar";
@import "partials/welcome-box";
@import "partials/form-box";
@import "partials/content-box";
@import "partials/carousels";
@import "partials/tables";
@import "partials/interactions-row";
@import "partials/downloads-area";
@import "partials/articles-events";
@import "partials/biography-pages";
@import "partials/grid";
@import "partials/footer";
@import "partials/steve-custom.scss";

То, что действительно, действительно меня бросает, это то, как app.js узнает, что я ссылаюсь на папки в папке node_modules, и как app.css узнает, что я ссылаюсь на Bootstrap, просто используя ~?

Почему мне не нужно указывать абсолютные пути?

- общее правило, что элементы, связанные с JavaScript, обычно берутся из npm, а зависимости PHP - из composer?

Мое замешательство происходит из-за того, что я искал пакет под названием Laravel Full Calendar, и его стилизация и код JS, похоже, извлекаются через npm, но его PHP-зависимые части извлекаются из Composer?

Это нормальное поведение?

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

Answer 1

Прежде всего, краткое объяснение о трех менеджерах зависимостей.

Композитор

Composer - это инструмент для управления PHP зависимостями. Он использует Packagist , чтобы получить информацию о зависимостях и правильно установить их для вас.

NPM

NPM является частью экосистемы Node и в основном был создан для управления зависимостями для приложений Node.js. Однако с ростом популярности Node люди начали использовать NPM не только для модулей Node.js. Теперь это квази-стандарт для управления вашими JavaScript зависимостями.

Бауэр

Подобно NPM, Bower управляет JavaScript зависимостями. Однако Bower был создан для того, чтобы отделить пакеты для разработки внешнего интерфейса (такие как Bootstrap, jQuery, ...) от всей экосистемы модулей Node, а также предложить менеджер пакетов для CSS. Он предлагает / предлагает некоторые функции, которые NPM не предоставляет или не предоставляет.

Подводя итог: Composer для пакетов PHP, NPM и Bower для пакетов JavaScript. Я почти уверен, что нет никаких пакетов, доступных для Composer и NPM, так как они ориентированы на два очень разных языка программирования. Однако Bower можно заменить NPM и наоборот. С моей точки зрения, Bower отчасти устарел, поскольку есть и другие инструменты, которые намного более продвинуты, и большинство проектов просто используют NPM для управления зависимостями.

---

Давайте продолжим с вашими вопросами.

откуда app.js узнает, что я ссылаюсь на папки в папке node_modules, и как app.css узнает, что я ссылаюсь на Bootstrap, просто используя ~?

Не сам файл знает, что тильда (~) является синонимом каталога node_modules. Компилятор [1] знает, что он должен искать пакет в каталоге, где упоминается тильда.
Обратите внимание, что синоним tilde> node_modules - это концепция для разработки CSS, а не для JavaScript.

Почему мне не нужно указывать абсолютные пути?

Ты мог бы. Вы также можете использовать относительные пути. Или тильда. На самом деле, это не имеет никакого значения. Это зависит только от используемого вами компилятора.

является общим эмпирическим правилом, что элементы, связанные с JavaScript, обычно берутся из npm, а зависимости PHP - от композитора?

Не эмпирическое правило, это обязательное условие. Вы не найдете модули PHP через NPM и наоборот.

Мое замешательство происходит из-за того, что я искал пакет под названием Laravel Full Calendar, и его стилизация и код JS, похоже, извлекаются через npm, но его PHP-зависимые части извлекаются из Composer?

Абсолютно разумно. Если у вас есть пакет Laravel, который добавляет поддержку Fullcalendar в ваше приложение, я бы создал пакет PHP, независимый от пакета NPM. Пакет PHP создает HTML, а пакет NPM просто обслуживает CSS и JavaScript.
Я бы не назвал это нормальным поведением, но, как я уже сказал, вполне разумным.

---

Надеюсь, я ответил на ваши вопросы так, чтобы вы поняли суть вопроса. И я согласен, что вся эта концепция управления зависимостями и различия не так легко понять. Если у вас есть другие вопросы, просто оставьте комментарий.

---

[1] Compiler> Может быть любой модуль, который преобразует app.scss в app.css. Примером является node-sass.