ReferenceError: $ 未定义，Jquery Import with vite答案

【问题标题】：ReferenceError: $ is not defined, Jquery Import with viteReferenceError: $ 未定义，Jquery Import with vite
【发布时间】：2023-02-17 07:12:40
【问题描述】：

我尝试使用全新安装的 laravel 9.20 和最低配置

在 vite.config.js 中

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

在 app.js 中

import './bootstrap';

import $ from "jquery"; 
window.$ = window.jQuery = $;

import '../sass/app.scss';

我也试过这个

import * as $ from "jquery";
window.$ = window.jQuery = $;

在刀片中加载资产，我用这个脚本进行测试

@vite(['resources/js/app.js']);

$("#alertbox").alert("test");

但我在控制台中收到以下错误：

未捕获的 ReferenceError：$ 未定义

我无法让它工作，请帮忙

【问题讨论】：

这回答了你的问题了吗？ How to import jquery using ES6 syntax?

标签： javascript jquery laravel vite

【解决方案1】：

发生这种情况是因为 Vite 的模块加载顺序。您看到的是竞争条件，这不是导入问题。

要确认这一点，请尝试在超时后调用 jQuery 代码，如下所示。

<script>
   setTimeout(function() {
      console.log($);
      $("#alertbox").alert("test");
   }, 5000);
</script>

如果以上没有错误，则意味着代码以错误的顺序执行。但是加个timeout也不是很好的解决方法，所以我们看看问题的原因。

如果您查看源代码，您会看到类似这样的内容。

<script type="module" src="http://localhost/build/assets/app.342432.js"></script>

这意味着 Vite 正在将脚本作为模块加载。还有module scripts are always deferred。因此，如果您的 jQuery 脚本放在 Vite 指令之后，则在将 jQuery 加载到窗口之前，首先执行 jQuery 代码 - 这会触发 $ is undefined 错误。

在最佳实践中，您应该将 jQuery 代码移至 app.js 文件，以便它保留在自己的模块中。另一种处理方法是将脚本标记标记为模块，然后它将遵循文档的加载顺序。

如下更改脚本标签。

@vite(['resources/js/app.js']);

<script type="module">
   $("#alertbox").alert("test");
</script>

【讨论】：

添加type="module"解决了这个问题。谢谢

【解决方案2】：

在刀片模板中从 cdn 添加 jquery

https://cdnjs.com/libraries/jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

并解决它

【讨论】：