Laravel 资产管理，如何使用已安装的 NPM 库（参考错误）答案

【问题标题】：Laravel Asset Management, how to use installed NPM library (reference error)Laravel 资产管理，如何使用已安装的 NPM 库（参考错误）
【发布时间】：2017-12-23 03:20:47
【问题描述】：

除了直接下载之外，我对以任何其他方式管理资产以及将所需文件复制到指定文件夹并简单地引用它都是新手。但是，我希望让我的资产“接近框架”，因此希望能够清楚地了解它是如何在 Laravel 中完成的。

我正在使用 Laravel v5.4 和 NPM v5.3.0

我想使用 Sweet Alert 库，我也想使用

npm install sweetalert

将文件按预期放置在 node_modules 目录和 package.json 中

这就是混乱的开始。然后我做了

npm install --no-bin-links

（文档为 Windows 主机推荐的 no-bin-links 标志）

和

npm run dev

认为这会将库编译/缩小为我的 app.js 或 vendor.js（不存在），或者至少做一些魔术让我使用该库。

输出状态：

DONE  Compiled successfully in 8551ms

这表明我没有在此过程中包含 Sweet Alert 库。

PHPStorm 确实建议将该库作为自动完成选项，但应用程序无法加载该库，在加载时在 JS 控制台中说明：

jQuery.Deferred exception: swal is not defined ReferenceError: swal is not defined

我还尝试在 bootstrap.js 中“要求”该库，说明：

window.swal = require('sweetalert');

或者干脆

swal = require('sweetalert');

IDE 自动完成功能再次提示“sweetalert”。

这是我尝试使用它的方式：

$( document ).ready(function () {
        alert("Hello!"); //works
        swal({
            title: "Hello!",
            text: "Hellooo",
            type: "error",
            confirmButtonText: "OK THEN"
        });
    });

这会引发上述错误。

我也尝试使用初始化

window.swal({...
sweetAlert({...

失败了。

我错过了什么？你应该如何在 Laravel 项目中使用 NPM 包/最佳实践是什么？

非常感谢任何帮助。

【问题讨论】：

标签： laravel npm asset-pipeline assets node-modules

【解决方案1】：

您需要在 webpack.js 配置文件中添加对 sweetalert 供应商文件的引用。

mix.scripts('/vendor/..../sweetalert2.min.js', '/public/js/sweetalert.min.js');

这会在您运行时将其从您的供应商文件夹复制到您的公用文件夹

npm run dev

【讨论】：