Laravel中NPM，Composer和Bower的区别？

Question

So in Laravel there is Composer, NPM and Bower, I know they are all deoendancy managers.

Composer - This seems to focus on PHP dependencies and the package listing is controller by the contents of composer.json. To install packages you can either add to this file or run php composer install <package>.

NPM - This seems to be focused on JavaScript dependencies but also has a crazy amount of packages. The packages installed by npm install are dictated to by the contents of the package.json file.

Bower - As far as I know this is for front-end packages?

In Laravel you can use all three if you so wish but why would you use one over the other in cases where libraries are available via, say, both npm and composer?

For instance, in an install of Laravel they have two files:

• app.js - the main js file of your application
• bootstrap.js - the file that is included in app.js to pull in some dependencies

This is the contents of my bootstrap.js in 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
// });

In app.css I have this:

/* 
 * 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";

The thing that is really, really throwing me is: how does app.js know I'm refering to folders in the node_modules folder and how does app.css know I'm refering to Bootstrap just by using a ~?

Why don't I have to specify the absolute paths?

is the general rule of thumb that JavaScript related items usually come from npm and PHP dependencies come from composer?

My confusion comes because I was looking at a package called Laravel Full Calendar and it's styling and JS code seem to be pulled via npm but its PHP dependant parts are pulled from Composer?

Is this normal behaviour?

I get there are a lot of questions here but I feel like the Laracasts really fell short of explaining the practical usage of these package managers.

Answer 1

First of all a short explanation about the three dependency managers.

Composer

Composer is a tool to manage PHP dependencies. It uses Packagist to get information on dependencies and install them properly for you.

NPM

NPM is part of the Node ecosystem and was primarily built to manage the dependencies for Node.js applications. However, as Node became more popular people started using NPM not just for Node.js modules. It is now the quasi-standard to manage your JavaScript dependencies.

Bower

Similar to NPM, Bower manages JavaScript dependencies. However, Bower was created to separate packages for frontend development (such as Bootstrap, jQuery,...) from the whole Node module ecosystem and also offer a package manager for CSS, too. It offers / offered some features that NPM does not or didn't provide.

To summarize: Composer is for PHP packages, NPM and Bower for JavaScript packages. I'm pretty sure that there are no packages that are available for both Composer and NPM as they focus on two very different programming languages. However, Bower can be replaced by NPM and the other way round. From my point of view Bower is kind of deprecated as there are some other tools that are far more advanced and most projects just use NPM for dependency management.

---

Let us continue with your questions.

how does app.js know I'm refering to folders in the node_modules folder and how does app.css know I'm refering to Bootstrap just by using a ~?

It's not the file itself that knows the tilde (~) is a synonym for the node_modules directory. It is the compiler[1] that knows it should look up the package in the directory wherever the tilde is mentioned.
Please notice that the tilde > node_modules synonym is a concept for CSS development, not for JavaScript.

Why don't I have to specify the absolute paths?

You could. You can also use relative paths. Or the tilde. In fact, it does not make any difference. It just depends on the compiler you are using.

is the general rule of thumb that JavaScript related items usually come from npm and PHP dependencies come from composer?

Not a rule of thumb, it's a must-do. You won't find PHP modules via NPM and vice versa.

My confusion comes because I was looking at a package called Laravel Full Calendar and it's styling and JS code seem to be pulled via npm but its PHP dependant parts are pulled from Composer?

Absolutely reasonable. If you have a Laravel package that adds support for Fullcalendar to your app, I would create a PHP package that is independent from an NPM package. The PHP package builds the HTML while the NPM package just serves the CSS and JavaScript.
I wouldn't call this a normal behavior but as I said, totally reasonable.

---

I hope I answered your questions in a way you understand the matter. And I agree that this whole concept of dependency management and the differences it not that easy to understand. If you have any other questions just leave a comment.

---

[1] Compiler > Could be any module that converts app.scss into app.css. Example is node-sass.