Laravel Mix未定义JavaScript函数
YCh*_*hen 5 javascript function npm laravel webpack
首先，在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中进行测试
其结果是，JavaScript函数button1Clicked()中resources/js/app.js没有定义。但功能button2Clicked()中testing.blade.php可以被定义。是Laravel Mix的错误还是我犯了一些错误
我和你有同样的问题。事实证明，当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){ // 你的代码 } (2认同)
更新 resources/js/app.js 中的代码如下 -
button1Clicked = function(){
console.log('Button 1 is clicked');
};
那么它将可用于全球范围。
- 搜索了很长时间才找到这个解决方案。谢谢！ (2认同)
| 归档时间： |
|
| 查看次数： |
2095 次 |
| 最近记录： |