Laravel Mix 未定义 JavaScript 函数
Posted
技术标签:
【中文标题】Laravel Mix 未定义 JavaScript 函数【英文标题】：JavaScript function is not defined with Laravel Mix 【发布时间】：2018-03-20 11:58:30 【问题描述】：首先，resources/js/app.js中的代码
function button1Clicked()
console.log('Button 1 is clicked');
二、testing.blade.php中的代码
<!DOCTYPE html>
<html>
<head>
<meta name="csrf-token" content=" csrf_token() ">
<title>Testing</title>
</head>
<body>
<button onclick="button1Clicked()">Button 1</button>
<button onclick="button2Clicked()">Button 2</button>
<script type="text/javascript" src="!! asset('js/app.js') !!"></script>
<script type="text/javascript">
function button2Clicked()
console.log('Button 2 is clicked');
</script>
</body>
</html>
npm run dev 并在 localhost 中测试后
因此，resources/js/app.js 中的 JavaScript 函数 button1Clicked() 未定义。但可以定义testing.blade.php 中的函数button2Clicked()。
是 Laravel Mix 的错误还是我犯了一些错误
【问题讨论】：
您能否添加您的webpack.mix.js 和app.js 文件的完整内容？
iCoders 是正确的，您需要使用 而不是!!，因为!! 用于显示未转义的内容
@iCoders 我试过把它改成 但还是不行
@JeffreyWesterkamp 我已经完成了内容并检查了脚本也在我的 public/js/app.js 中
【参考方案1】：
我和你有同样的问题。
事实证明，当 Laravel-mix（又名 Webpack）编译 js 时，它会将我们的函数包装在一个闭包中。
例如，当我们定义这样的函数时
function setlocale(code)
console.log(code);
Webpack 会生成成
(function(module, exports, __webpack_require__)
function setlocale(code)
console.log(code);
);
这就是为什么我们可以访问闭包内部的变量或函数，但我们不能从外部访问，因为它限制了我们的范围。
一个简单的解决方案是将我们的函数设置为window变量，这是一个全局变量。
window.setlocale = function (code)
console.log(code);
【讨论】：
天哪，它现在可以工作了。我喜欢这样。 window.YourFunction = function(ParamIfHaveParam) // 你的代码 为了更好地理解window.yourVariable = function (code) ...
这个话题很老了，但是我想问你，为什么webpack会把我们的函数关闭？它有一些优点吗？
嗨 MatějČerný，Webpack 采用该策略来防止全球环境污染。【参考方案2】：
更新 resources/js/app.js 中的代码如下-
button1Clicked = function()
console.log('Button 1 is clicked');
;
那么它将在全球范围内可用。
【讨论】：
不得不搜索很长时间才能找到这个解决方案。谢谢！ 很高兴知道它对您有所帮助！ :)【参考方案3】：您只需使用 js 文件的顶部即可。
window.prototype = this;
【讨论】：
【参考方案4】：由于在通过 laravel mix / webpack 构建/打包资产时无法访问 window 对象，所以这就是代码本身未定义 onclick 事件处理程序的原因。因此，如果 window.setlocale 方法不适合您，那么另一种方法是使用 jQuery click 事件进行绑定，例如
$("#button-id").on("click",function() =>
// enter code here
)
【讨论】：
以上是关于Laravel Mix 未定义 JavaScript 函数的主要内容，如果未能解决你的问题，请参考以下文章
在 Laravel Mix 中使用 extract() 时 Vue 未加载
Uncaught ReferenceError: $ is not defined - Laravel 5.5 + Laravel Mix
Laravel 5 WebPack JQuery - $ 未定义