将自定义 JavaScript 函数与 Laravel 5.6 结合使用

Question

我在 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)，它可以正常工作。但是，我无法执行在我的 blade 模板中；控制台日志显示它未定义。例如：

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

Answer 1

如果您运行在终端中与 npm run watch 混合使用，但您仍然遇到此问题，请仔细检查以确保您在 blade 模板：

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

此外，请确保此 <script> 标记在任何其他 JS 脚本之上。

Answer 2

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

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

Use custom JavaScript function with Laravel 5.6