如何将sweetalert2安装到laravel 10 vite

Question

我不能在 sweetalert2 上遇到问题。

我的控制台出现错误：

> Uncaught ReferenceError: Swal is not defined
    at HTMLButtonElement.<anonymous> (list:121:13)
    at HTMLButtonElement.dispatch (jquery-3.7.0.js:5135:27)
    at elemData.handle (jquery-3.7.0.js:4939:28)

涉及这部分代码（index.blade.php）：

    <script type="text/javascript">
                $(function() {
            $('.delete').click(function() {
                Swal.fire("hello");
            });
        });
    </script>

在其他文件中我有： app.blade.php：

    <script type="text/javascript">
            @yield('javascript')
    </script>

bootstap.js

    import 'bootstrap';
    try {
        window.Popper = require('popper.js').default;
        window.$ = window.jQuery = require('jquery');
        window.Swal = require('sweetalert2');
    
        require('bootstrap');
    } catch (e) {}

package.json

    {
        "private": true,
        "type": "module",
        "scripts": {
            "dev": "vite",
            "build": "vite build",
            "watch": "vite build --watch",
            "prod": "vite production"
        },
        "devDependencies": {
            "@popperjs/core": "^2.11.6",
            "axios": "^1.1.2",
            "bootstrap": "^5.2.3",
            "laravel-vite-plugin": "^0.7.5",
            "sass": "^1.56.1",
            "vite": "^4.0.0"
        },
        "dependencies": {
            "jquery": "^3.7.0",
            "popper.js": "^1.16.1",
            "sweetalert2": "^11.7.16"
        }
    }

app.scss

    @import 'sweetalert2/src/sweetalert2.scss';

我使用命令安装 sweetalert2：

npm 安装 sweetalert2

这会在node_modules中添加新文件夹sweetalert

当我使用 npm 审计时，我有：

> npm audit report                                                                                                          
                                                                                                                         sweetalert2  >=11.6.14                                                                                                      
sweetalert2 v11.6.14 and above contains potentially undesirable behavior - https://github.com/advisories/GHSA-mrr8-v49w-3333
fix available via `npm audit fix --force`                                                                                   
Will install [email protected], which is a breaking change                                                                
node_modules/sweetalert2                                                                                                    
                                                                                                                            
1 low severity vulnerability                                                                                                

To address all issues (including breaking changes), run:
  npm audit fix --force

但是 npm 审核修复 --force 没有帮助

我也尝试使用 npm run dev 和 npm run watch。

编辑： 我将其添加到 app.blade.php

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

这很有帮助。

但是，没有它它还能工作吗？

Answer 1

在你的app.js中

// SweetAlert2
import Swal from "sweetalert2";
window.Swal = Swal;