包括主要的凉亭组件 Laravel blade

Question

为了从每个 Bower 组件中包含我需要的一切，我使用了一个库来做到这一点（它为我安装的每个新组件创建脚本和 link 标签，并将它们放在我的主 blade):

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 %"
    }
}

Answer 1

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

要构建 JS（丑化、缩小和其他一些东西），您可以使用 Laravel Mix via 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 blade

Including bower components in the main Laravel blade

javascript

laravel

bower

laravel-5