Laravel 9不使用CDN集成Summernote与jQuery遇错求助

1. Uncaught ReferenceError: require is not defined：Laravel 9 默认使用 Vite 作为前端构建工具，Vite 遵循 ES 模块规范，不支持 Node.js 原生的 require() 语法，若你在 app.js 中使用 require() 引入 jQuery/Summernote，就会触发该错误。
2. Uncaught ReferenceError: $ is not defined：要么是 jQuery 未被全局挂载到 window 对象，导致页面内的初始化脚本无法找到 $；要么是初始化脚本的执行时机早于 Vite 加载 jQuery 的时机，出现了加载顺序问题。

1. 安装依赖 #

执行终端命令安装 jQuery 和 Summernote：

npm install jquery summernote

2. 配置 Vite 与 app.js #

• 修改 vite.config.js：添加 jQuery 别名，同时确保 Vite 能正确解析依赖：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '$': 'jquery',
            'jQuery': 'jquery',
        },
    },
});

• 修改 resources/js/app.js：使用 ES 模块的 import 语法引入资源，并全局挂载 jQuery（方便页面脚本直接调用）：

// 引入依赖
import $ from 'jquery';
import 'summernote/dist/summernote-bs5.css'; // Laravel 9 默认用 Bootstrap5，对应此样式文件
import 'summernote/dist/summernote-bs5.js';

// 全局挂载 jQuery 到 window 对象
window.$ = window.jQuery = $;

3. 配置视图文件 #

• 在视图的 <head> 标签内引入 Vite 编译的资源：

<head>
    <!-- 其他头部内容 -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

• 在 <body> 内添加编辑器容器：

<div id="summernote">Hello Summernote</div>

• 在 </body> 闭合标签前添加初始化脚本（确保 DOM 加载完成后执行）：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('#summernote').summernote({
            height: 300, // 可选：设置编辑器高度
            toolbar: [
                ['style', ['bold', 'italic', 'underline']],
                ['para', ['ul', 'ol']],
                ['view', ['codeview']]
            ] // 可选：自定义工具栏
        });
    });
</script>

4. 构建并启动项目 #

执行终端命令完成编译和启动：

npm run build
php artisan serve

内容的提问来源于stack exchange，提问作者Rusurano