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 只是通过使用 @ 987654343@?

为什么我不必指定绝对路径？

JavaScript 相关项通常来自 npm 而 PHP 依赖项通常来自 composer，这是一般的经验法则吗？

我的困惑是因为我正在查看一个名为 Laravel Full Calendar 的包，它的样式和 JS 代码似乎是通过 npm 提取的，但它的 PHP 相关部分是从 Composer 提取的？

这是正常行为吗？

我知道这里有很多问题，但我觉得 Laracast 真的没有解释这些包管理器的实际用法。

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] 知道它应该在提到波浪号的目录中查找包。
请注意，波浪号 > node_modules 同义词是 CSS 开发的概念，而不是 JavaScript。

为什么我不必指定绝对路径？

你可以。您也可以使用相对路径。或代字号。事实上，它没有任何区别。这仅取决于您使用的编译器。

JavaScript 相关项通常来自 npm 而 PHP 依赖项来自 composer 的一般经验法则是什么？

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

我的困惑是因为我正在查看一个名为 Laravel Full Calendar 的包，它的样式和 JS 代码似乎是通过 npm 提取的，但它的 PHP 相关部分是从 Composer 提取的？

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

---

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

---

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