如何使用 laravel-mix 将 Bootstrap、jQuery 和 popper.js 添加到 Laravel 8 项目？

Question

据我了解，以下命令应安装 Bootstrap、jQuery 和 popper.js：

composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev

运行这些命令后，我现在可以使用 Bootstrap 类名，但不能使用 jQuery。 当我尝试添加一些 jQuery 代码时，出现以下错误： Uncaught ReferenceError: $ is not defined

我添加了<script src="{{ asset('js/app.js') }}"></script>和<link href="{{ asset('css/app.css') }}" rel="stylesheet">到文档的头部。

我在这里错过了什么吗？

示例代码：

<!doctype html>
<html class="no-js" lang="da">

<head>
    <script src="{{ asset('js/app.js') }}"></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<script>
    $(document).ready(function () {
        alert(0);
    });
</script>
</body>
</html>

Answer 1

我在使用laravel/ui安装然后使用软件包时遇到了很多问题。 它安装的引导版本也已过时，因为它只有 4.6 版，而最新版本是，截至今天：5.1.1（ https://github.com/twbs/bootstrap/releases ），所以我决定尝试安装我自己打包，终于让一切正常了。

我所做的是使用以下命令安装所有软件包：

#We do this because it will take care of a lot of things for us
composer require laravel/ui
php artisan ui bootstrap

#And now we upgrade bootstrap and add new popper.js version
npm install bootstrap@latest @popperjs/core --save-dev

这应该安装所有 node_modules，包括 bootstrap v. 5.1.1、jquery v. 3.6 和 @popperjs/core v. 2.10.2，并且 package.json 现在看起来像这样：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.1",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    }
}

现在在 resources/js/bootstrap.js 我更改了代码，现在看起来像这样：

window._ = require('lodash');

/**
 * 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');
    window.Popper = require('@popperjs/core');
    window.bootstrap = require('bootstrap');

} 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';

更改后，只需运行

npm run dev

现在一切正常。 这是一个示例 HTML/JS 页面，可将它们全部用于测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery, popper.js, and Bootstrap</title>
    
    {{--    Load compiled CSS    --}}
    <link rel="stylesheet" href={{ asset('css/app.css') }}>
    
    {{--  popper.js CSS example  --}}
    <style>
        #tooltip {
            background: #333;
            color: white;
            font-weight: bold;
            padding: 4px 8px;
            font-size: 13px;
            border-radius: 4px;
        }
    </style>
</head>
<body>

{{--  Test Bootstrap css  --}}
<div class="alert alert-success mt-5" role="alert">
    Boostrap 5 is working using laravel 8 mix!
</div>

{{--  popper.js HTML example  --}}
<button id="button" aria-describedby="tooltip">My button</button>
<div id="tooltip" role="tooltip">My tooltip</div>

{{--    Load compiled Javascript    --}}
<script src="{{ asset('js/app.js') }}"></script>
<script>
    //Test jQuery
    $(document).ready(function () {
        console.log('jQuery works!');

        //Test bootstrap Javascript
        console.log(bootstrap.Tooltip.VERSION);
    });

    //Test popper.js
    const button = document.querySelector('#button');
    const tooltip = document.querySelector('#tooltip');
    const popperInstance = Popper.createPopper(button, tooltip);
</script>

</body>
</html>

Answer 2

确保您的<script>标记中没有defer导入app.js 。

这通常会导致 Laravel Mix 出现$ is not defined错误。

如何使用 laravel-mix 将 Bootstrap、jQuery 和 popper.js 添加到 Laravel 8 项目？

问题描述

2 个解决方案

解决方案1
7 已采纳 2021-10-03 15:32:10

解决方案2
1 2021-09-29 23:17:49

如何使用 laravel-mix 将 Bootstrap、jQuery 和 popper.js 添加到 Laravel 8 项目？

问题描述

2 个解决方案

解决方案1 7 已采纳 2021-10-03 15:32:10

解决方案2 1 2021-09-29 23:17:49

解决方案1
7 已采纳 2021-10-03 15:32:10

解决方案2
1 2021-09-29 23:17:49