Laravel Mix 未定义 JavaScript 函数答案

【问题标题】：JavaScript function is not defined with Laravel MixLaravel Mix 未定义 JavaScript 函数
【发布时间】：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 中

标签： javascript laravel function npm webpack

【解决方案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
})

【讨论】：