在 Laravel 5.6 中使用自定义 JavaScript 函数答案

【问题标题】：Use custom JavaScript function with Laravel 5.6在 Laravel 5.6 中使用自定义 JavaScript 函数
【发布时间】：2018-09-28 20:38:38
【问题描述】：

我在 Laravel 5.6 中使用自定义 JavaScript 函数时遇到了一些问题，无法弄清楚我做错了什么。

我在 /assets/js/ 中创建了一个标记为 helpers.js 的自定义文件，具有以下功能：

export const isBetween = function(n, a, b) {
    return (n - a) * (n - b) <= 0
};

然后，我在 app.js 中导入了文件：

import { isBetween } from './helpers.js';

如果我在 app.js 中执行 console.log(isBetween(20, 1, 40)，它可以正常工作。但是，我无法在刀片模板中执行；控制台日志显示它没有定义。例如：

<script type="text/javascript">
    jQuery(document).ready(function($) {
        console.log(isBetween(20, 1, 40));
    });
</script>

【问题讨论】：

【解决方案1】：

我们在 ES6/ES5 中使用 import 来导入特定的模块。但是如果你想在你的 app.js 之外使用它，那么你必须像这样使它成为一个全局变量：

window.isBetween = isBetween; // add this in helpers.js

【讨论】：

太好了，这解决了我的问题，所以我会接受它作为答案，但我很好奇这是否是 Laravel 应用程序的最佳实践？
好吧，如果你有 2 个相互依赖的独立脚本（app.js 和另一个），那么拥有全局变量是非常好的。您只需确保它们不会与其他 JS 脚本或库发生冲突。通常，编写良好的库封装了大多数变量，所以我认为您不必担心这一点。但是如果你想对really保持谨慎，你可以像这样命名它：window.myAppName = {}; window.myAppName.isBetween = isBetween，在你的JQuery中使用myAppName.isBetween(....)。这样，您的所有全局函数都可以共享您的应用命名空间

【解决方案2】：

如果您在带有 npm run watch 的终端中运行 mix 并且您仍然遇到此问题，请仔细检查以确保您的刀片模板中包含了 mix 的资产：

<script src="{{ mix('js/app.js') }}"></script>

此外，请确保此 <script> 标记高于您的任何其他 JS 脚本。

【讨论】：

感谢您的评论，但是是的，我正在运行 npm run watch 并且 app.js 在我的其他脚本之上。我正在使用而不是 mix()，但我也尝试过，但没有不行。