Laravel10导入Splide/jQuery后全局变量未定义问题求助

当你在app.js中通过ES模块语法导入Splide或jQuery时，这些库的变量默认只存在于模块内部作用域，不会自动挂载到全局的window对象上。而CDN方式引入的脚本是直接在全局作用域执行的，会主动将Splide、jQuery挂载到window，所以在blade模板的脚本中能直接访问。

1. 手动挂载到全局window对象 #

这是最直接的解决方式，在app.js中导入库后，将其赋值给window的属性，使其成为全局变量：

处理Splide

修改app.js的导入代码：

// 正确导入Splide类
import Splide from '@splidejs/splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';

// 挂载到全局window
window.Splide = Splide;

处理jQuery

修改app.js的导入代码：

import $ from 'jquery';

// 同时挂载$和jQuery到全局
window.$ = window.jQuery = $;

修改后重新编译资源（npm run dev或npm run build），就能在blade模板的脚本中直接使用Splide或jQuery了。

2. 使用构建工具的全局注入插件 #

如果不想手动挂载，可以通过webpack/Vite的插件自动将库注入到全局作用域：

针对Webpack（Laravel Mix）

在webpack.mix.js中配置ProvidePlugin：

const webpack = require('webpack');

mix.js('resources/js/app.js', 'public/js')
    .css('resources/css/app.css', 'public/css')
    .webpackConfig({
        plugins: [
            // 全局注入jQuery
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
            }),
            // 全局注入Splide
            new webpack.ProvidePlugin({
                Splide: ['@splidejs/splide', 'default'],
            })
        ]
    });

针对Vite

在vite.config.js中配置别名后，再执行手动挂载（Vite没有直接的ProvidePlugin等价物，手动挂载更简洁）：

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/dist/jquery.min.js',
        },
    },
});

随后在app.js中执行方案1的手动挂载步骤即可。

3. 在blade中使用模块脚本导入 #

如果不想污染全局作用域，可以将blade中的脚本改为模块类型，并从正确路径导入Splide：

<script type="module">
    import Splide from '/vendor/splidejs/splide/dist/js/splide.esm.js';
    new Splide( '.splide' ).mount();
</script>

这种方式需要确保导入路径正确，适合不需要全局使用库的场景。

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