我正在尝试在我的 Laravel 9 项目中导入 jQuery,我使用
npm i jquery
安装了该项目
我得到了
Uncaught ReferenceError: $ is not defined
在我的
app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
在我的另一个观点中,它延伸了
app.blade.php
<script>
$(function(){
alert('jquery ok');
})
</script>
在
resources/js/app.js
我尝试了各种方法
import $ from 'jquery';
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import inject from '@rollup/plugin-inject';
export default {
plugins: [
// Add it first
inject({
$: 'jquery',
}),
// Other plugins...
],
// The rest of your configuration...
};
try {
window.$ = window.jQuery = require('jquery');
} catch (e) {}
没有任何作用。我该如何解决这个问题?
npm - 8.11.0 节点 - 16.16.0 laravel/框架 - 9.32.0 维特 - 3.14
我的问题的答案可以在这里找到ReferenceError:$未定义,Jquery Import with vite
<script type="module"> //type="module" is the important part
$(function () {
alert('jquery ok');
})
</script>
您在哪里导入 JQuery 文件? (JS 和 CSS)
您的头部需要类似这样的内容:(显然您必须指定这些文件的实际路径)
<link href="./jquery-files/jquery-ui.css" rel="stylesheet">
<script src="./jquery-files/external/jquery/jquery.js"></script>
<script src="./jquery-files/jquery-ui.min.js"></script>
那么你只需要使用这样的脚本标签:
<script type="text/javascript">
$().ready(function () {
//add all JQuery related code here!!
alert('jquery ok'); //this will show an alert when the page is loaded
});
</script>
如果您想使用 javascript 动态导入,因为某些页面可能不需要 jQuery。
构建工具/捆绑器,如 ViteJs、WebPack、Laravel Mix 等都支持这一点。
在你的
app.js
里面
async function main() {
const { default: jQuery } = await import('jquery')
window.jquery = window.jQuery = window.$ = jQuery;
// code that uses jQuery
console.log('jQuery v', $().jquery);
}
main();
您可以将导入放在 if 语句中
async function main() {
if (document.querySelector('.useJquery')) {
const { default: jQuery } = await import('jquery')
window.jquery = window.jQuery = window.$ = jQuery;
// code that uses jQuery
console.log('jQuery v', $().jquery);
}
}
在任何需要 jQuery 的页面中,您可以添加
class="useJquery"
。
那么只有具有
useJquery
类的页面才会下载 JQuery。
对我来说,问题在于如何在
bootstrap.js
上导入库。我更改了文件:
import _ from 'lodash';
// Since I'm using jquery from admin-lte 🤷
import $ from 'admin-lte/plugins/jquery/jquery';
import * as Popper from 'popper.js';
// Since I'm using jquery from admin-lte 🤷
import 'admin-lte/plugins/bootstrap/js/bootstrap'
window._ = _;
window.Popper = Popper.defaults;
window.$ = window.jQuery = $;
现在可以使用了
<script type="module">
$(function () {
console.log('Jquery loaded');
});
</script>
要在 Laravel 9 中安装和设置 jQuery,我遵循了这篇文章:https://devdojo.com/thinkverse/how-to-use-jquery-with-laravel-and-vite