在 Laravel 主刀片中包含凉亭组件答案

【问题标题】：Including bower components in the main Laravel blade在 Laravel 主刀片中包含凉亭组件
【发布时间】：2018-06-15 11:38:19
【问题描述】：

为了从每个 bower 组件中包含我需要的所有内容，我使用了一个库来执行此操作（它为我安装的每个新组件创建脚本和链接标签并将它们放在我的主刀片中）：

welcome.blade.php：

<!doctype html>
<html lang="{{ app()->getLocale() }}" style="height: 100%">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Work Web App</title>
    <link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
    <!-- bower-css:start -->
    <link href="../assets/bower_components/bootstrap-social/bootstrap-social.scss" rel="stylesheet">
    <link href="../assets/bower_components/components-font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../assets/bower_components/components-font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../assets/bower_components/bootstrap-social/bootstrap-social.css" rel="stylesheet">
    <!-- bower-css:end -->

</head>
<body style="height: 100%">
<div id="root" class="container-fluid wrapper" style="background: #EDF1F5; height: 100%"></div>
<script src="{{mix('js/app.js')}}" ></script>
<!-- bower-js:start -->
<script src="../assets/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../assets/bower_components/jquery/dist/jquery.js"></script>
<script src="../assets/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- bower-js:end -->
</body>
</html>

但每当我尝试访问我的应用时，我都会得到：

GET http://*****.test/assets/bower_components/bootstrap-social/bootstrap-social.css net::ERR_ABORTED
GET http://w*****.test/assets/bower_components/bootstrap/dist/js/bootstrap.js net::ERR_ABORTED
GET http://*****.test/assets/bower_components/jquery/dist/jquery.js net::ERR_ABORTED
GET http://*****.test/assets/bower_components/bootstrap/dist/js/bootstrap.js 404 (Not Found)

我的 .bowerrc 文件的配置：

{
    "directory": "resources/assets/bower_components",
    "scripts": {
        "preinstall": "bowinst preinstall %",
        "postinstall": "bowinst install %",
        "preuninstall": "bowinst uninstall %"
    }
}

【问题讨论】：

你使用哪个版本的 Laravel？为什么你使用 Bower 而不是 NPM？
我使用的是 Laravel 5.5

标签： javascript laravel laravel-5 bower

【解决方案1】：

Laravel 带有一个 package.json。所有的JS deps都可以通过npm install安装，并会下载到你根目录下的node_modules文件夹中。

要构建 JS（丑化、缩小和其他一些东西），您可以通过 npm run dev（用于开发）、npm run watch（用于在开发模式下构建但带有文件观察器）或 npm run production（用于生产）。

所有这些的入口点是resources/assets/js/app.js。那里将导入bootstrap.js 文件。（请注意这里的名称。它与 CSS 框架无关）。

你想在你的应用程序中包含的任何 JS 库都应该是必需的。

您可以在https://laravel.com/docs/5.5/mix找到更深入的信息

【讨论】：

我对 laravel mix 很熟悉，但是我无法将 bootstrap social 的 css 文件导入到我的 app.css 中，现在它们在我使用 npm 安装库后位于 node_modules 中
如果一个 js 包只能通过 bower 获得怎么办？喜欢github.com/kelvintaywl/dentist.js？请记住，我是初学者，可能会遗漏一些东西。