Laravel 5 WebPack JQuery - $ 未定义
Posted
技术标签:
【中文标题】Laravel 5 WebPack JQuery - $ 未定义【英文标题】：Laravel 5 WebPack JQuery - $ is not defined 【发布时间】：2019-01-06 19:33:27 【问题描述】：我有 webpack.min.js：
mix.webpackConfig(webpack =>
return
plugins: [
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
)
]
;
);
mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
.js('resources/assets/scripts/index.js', 'public/js/app.js')
.copyDirectory('resources/assets/static', 'public/static')
.version()
.sourceMaps();
和 package.json：
"devDependencies":
"jquery": "^3.3.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-datepicker": "^1.7.1",
"browser-sync": "^2.24.6",
"browser-sync-webpack-plugin": "^2.0.1",
"chart.js": "^2.7.2",
"cross-env": "^5.2.0",
"datatables": "^1.10.18",
"easy-pie-chart": "^2.1.7",
"font-awesome": "4.7.0",
"fullcalendar": "^3.9.0",
"jquery-sparkline": "^2.4.0",
"jvectormap": "^2.0.4",
"laravel-mix": "^2.1.11",
"load-google-maps-api": "^1.2.0",
"lodash": "^4.17.10",
"masonry-layout": "^4.2.2",
"perfect-scrollbar": "^1.1.0",
"popper.js": "^1.14.3",
"skycons": "^1.0.0",
"vue": "^2.5.16"
在我的刀片页脚脚本中：
@section('footer')
<script type="text/javascript">
if (typeof jQuery != 'undefined') alert(jQuery.fn.jquery);
$(function()
$('#cc-number').validateCreditCard(function(result)
$('.log').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
+ '<br>Valid: ' + result.valid
+ '<br>Length valid: ' + result.length_valid
+ '<br>Luhn valid: ' + result.luhn_valid);
);
);
</script>
@endsection
在我运行npm run dev 并加载我的页面后，我收到错误：
未捕获的引用错误：$ 未定义
我的alert(jQuery.fn.jquery); 没有被触发
我如何从 npm 加载 jquery，然后我可以在刀片中的内联 html 代码中使用它？
【问题讨论】：
【参考方案1】：在 app.blade.php 中
<script src=" asset('js/app.js') " defer></script>
去掉 defer 所以做它
<script src=" asset('js/app.js') " ></script>
https://github.com/laravel/framework/issues/17634#issuecomment-375473990
【讨论】：
defer 是干什么用的？
defer 表示只有在加载其他所有内容时才会加载脚本【参考方案2】：
在你的 main.js 文件中试试这个
global.$ = global.jQuery = require('jquery');
【讨论】：
哪个 main.js 文件？在这里：resources/assets/scripts/index.js?
无论如何，在resources/assets/scripts/index.js 中添加global.$ = global.jQuery = require('jquery'); 即可解决问题 - 谢谢！
对于其他使用 Laravel 5.8 找到此主题的人：如果您的 app.blade.php 中有 <script src=" asset('js/app.js') " defer></script> 标签，只需将其移动到 body 标签的末尾并删除 defer 语句.这应该可以解决问题，并且仍然可以与 vue.js 一起正常工作【参考方案3】：
当我尝试使用它提供的一些默认视图时，我在 Laravel 5.7 中遇到了这个问题。我试图在一些扩展默认 layout/app.blade.php template 的刀片视图模板中使用 JavaScript（需要使用 jQuery）。
但对我来说问题不是window.$ 没有被分配window.jQuery 库，因为就resources/js/bootstrap.js 文件而言，它正在被添加。 （这是一个似乎被 Laravel Mix 预编译为 public/js/app.js 的文件。您可以通过查看 webpack.mix.js 看到这种情况，在其中，您会发现以下语句：
mix.js('resources/js/app.js', 'public/js')
在哪里
resources/js/app.js 需要 resources/js/bootstrap.js 。
如果您希望自己手动编译，请先运行：
npm install 然后npm run dev 在开发模式下，或npm run prod 在生产模式下。
但无论如何（我跑题了）......
原来问题出在这里：
resources/views/layouts/app.blade.php
有一个带有 defer 属性的脚本标记实例，如下所示：
<script src=" asset('js/app.js') " defer></script>
defer 属性导致了所有问题。
所以我像这样删除了它：
<script src=" asset('js/app.js') "></script>
解决了jQuery未定义的问题。
我更喜欢通过简单地将脚本标签移近body HTML 标签的末尾来延迟我的 JavaScript 加载。
【讨论】：
如果你使用 Vue.js，defer 声明似乎是必要的。如果您只是将<script> 标签移动到<body> 标签的末尾，它也可以正常工作。不知道他们为什么把它放在那里
在我的情况下它会导致问题，即使我已经将脚本标签放在正文的末尾。 defer 到底是为了什么？【参考方案4】：
我在 jQuery 中使用 mix.copy 而不是 mix.js，效果很好！
示例：
mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/vendor/jquery/jquery.min.js');
【讨论】：
然后在</body>之前添加<script src=" asset('vendor/jquery/jquery.min.js') "></script>以上是关于Laravel 5 WebPack JQuery - $ 未定义的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 5.4 laravel-elixir-webpack-react
使用 webpack 在 Laravel 5 中将插件安装到 CKEditor 5
markdown Laravel 5.4：从gulp迁移到webpack