如何在不使用Vite/Mix的情况下在Blade文件中使用Laravel Echo？

之前我在使用Vite/Mix的Laravel项目中，通过模块方式引入Laravel Echo，代码如下：

resources/js/bootstrap.js 中导入Echo：

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

resources/js/app.js 中使用Echo：

import './bootstrap';
Echo.channel('some_channel')
.listen('OrderShipmentStatusUpdated', (e) => {
    console.log("broadcast received");
});

现在我想在不使用Vite或Mix的项目中直接在Blade文件里使用Echo，放入以下代码后出现Uncaught ReferenceError: Echo is not defined错误：

Echo.channel('some_channel')
    .listen('OrderShipmentStatusUpdated', (e) => {
        console.log("broadcast received");
    });

请问如何将Echo作为普通JS脚本而非模块导入使用？官方文档只提供了NPM安装方式，有没有可直接下载的脚本文件？

方式一：通过CDN直接引入脚本 #

在Blade模板的<head>或页面底部按顺序引入依赖脚本（先引入Pusher，再引入Echo，因为Echo依赖Pusher驱动）：

<!-- 引入Pusher JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/8.2.0/pusher.min.js"></script>
<!-- 引入Laravel Echo -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.15.3/echo.min.js"></script>

引入后手动初始化Echo，配置广播驱动信息（以Pusher为例）：

<script>
// 初始化Echo并挂载到window对象
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '{{ env('PUSHER_APP_KEY') }}',
    cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
    forceTLS: true
});

// 正常使用Echo监听事件
Echo.channel('some_channel')
    .listen('OrderShipmentStatusUpdated', (e) => {
        console.log("broadcast received");
    });
</script>

方式二：下载本地脚本文件使用 #

如果不想依赖CDN，可直接下载脚本文件到本地使用：

1. 从CDN页面下载Pusher和Laravel Echo的min.js文件
2. 将文件放到项目的public/js目录下
3. 在Blade中通过本地路径引入：

<script src="{{ asset('js/pusher.min.js') }}"></script>
<script src="{{ asset('js/echo.min.js') }}"></script>

后续同样按照上述步骤初始化Echo即可。

注意事项 #

• 脚本引入顺序不可颠倒：依赖库（Pusher/Socket.io）必须在Echo之前引入
• 根据实际使用的广播驱动调整配置：比如使用Socket.io驱动时，需替换依赖脚本为Socket.io文件，初始化时将broadcaster设为'socket.io'并配置对应参数
• 确保广播驱动的配置信息（如Pusher的key、cluster）与项目环境变量一致

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