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是管理PHP依赖项的工具。它使用Packagist获取有关依赖项的信息并为您正确安装它们。

NPM

NPM是Node生态系统的一部分，主要用于管理Node.js应用程序的依赖关系。但是，随着Node变得越来越流行，人们开始将NPM不仅用于Node.js模块。现在，它是管理JavaScript依赖关系的准标准。

凉亭

与NPM相似，Bower管理JavaScript依赖项。但是，Bower的创建是为了从整个Node模块生态系统中分离用于前端开发的软件包（例如Bootstrap，jQuery等），并且还提供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依赖项来自作曲家？

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

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

绝对合理。如果您有一个Laravel软件包，它将对Fullcalendar的支持添加到您的应用程序中，那么我将创建一个独立于NPM软件包的PHP软件包。PHP软件包生成HTML，而NPM软件包仅提供CSS和JavaScript。
我不会称其为正常行为，但正如我所说，这是完全合理的。

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

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