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.