php - Laravel 中 NPM、Composer 和 Bower 的区别？

Question

所以在 Laravel 中有 Composer , NPM和 Bower ，我知道他们都是 deoendancy 经理。

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

Composer是一个管理 PHP 依赖项的工具。它使用 Packagist获取有关依赖项的信息并为您正确安装它们。

新公共(public)管理

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 进行依赖项管理。

---

让我们继续回答您的问题。

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 ~?

不是文件本身知道波浪号 (~) 是 node_modules 目录的同义词。编译器 [1] 知道它应该在提到波浪号的目录中查找包。
请注意波浪号 > node_modules 同义词是 CSS 开发的概念，而不是 JavaScript。

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?

这不是经验法则，这是必须做的。您不会通过 NPM 找到 PHP 模块，反之亦然。

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?

绝对有道理。如果你有一个 Laravel 包来为你的应用程序添加对 Fullcalendar 的支持，我会创建一个独立于 NPM 包的 PHP 包。 PHP 包构建 HTML，而 NPM 包只提供 CSS 和 JavaScript。
我不会将此称为正常行为，但正如我所说，这是完全合理的。

---

我希望我以您理解的方式回答了您的问题。我同意依赖管理的整个概念及其差异并不那么容易理解。如果您有任何其他问题，请发表评论。

---

[1] Compiler > 可以是将 app.scss 转换为 app.css 的任何模块。示例是 node-sass。