Laravel中使用Vite打包初始化JS库时遇未定义错误求解答

一、解决AOS（及其他库）未定义的错误 #

你遇到的Uncaught ReferenceError: AOS is not defined是ES模块作用域导致的——Vite默认使用ES模块规范，每个JS文件都是独立的模块，模块内的变量不会自动挂载到全局window对象上，和你之前用<script>标签全局引入的逻辑完全不同。

两种修复方案： #

方案1：在app.js中将库挂载到全局

修改resources/js/app.js，显式把AOS挂载到window，这样所有页面都能全局访问：

import './bootstrap';
import 'flowbite'
import '@lottiefiles/lottie-player'
import AOS from 'aos'; // 接收AOS的默认导出
window.AOS = AOS; // 挂载到全局window对象
import './custom'

方案2：在custom.js中直接导入AOS

如果只在custom.js里用AOS，直接在该文件内导入即可，不需要全局挂载：

// resources/js/custom.js
import AOS from 'aos';
AOS.init();

同理处理jQuery UI #

对于jQuery UI，需要先导入jQuery，再导入jQuery UI，按需挂载全局：

// app.js中添加
import $ from 'jquery';
import 'jqueryui';
window.$ = $;
window.jQuery = $;

二、打包核心概念梳理 #

1. ES模块 vs 全局脚本 #

• 全局脚本：你之前用<script>引入的文件，所有变量都直接挂载到window，整个页面共享，容易出现变量冲突。
• ES模块：Vite默认采用的规范，每个文件是独立模块，变量仅在模块内部有效，通过import/export管理依赖，避免全局污染。

2. Vite打包的本质 #

Vite不是简单把文件合并，而是：

• 分析模块依赖关系，按需加载（开发模式下甚至不打包，直接按需请求模块）；
• 压缩、优化资源大小，提升生产环境加载速度；
• 处理非JS资源（比如CSS、图片），转成浏览器能识别的格式；
• 支持现代JS语法转译，兼容不同浏览器。

3. 第三方库的引入策略 #

• 模块内使用：如果库只在某个JS模块里用，直接import后在模块内使用即可，无需全局挂载，这是最推荐的方式，保持代码隔离。
• 全局挂载：如果需要在Blade模板的内联<script>或多个模块中共享，才把库挂载到window上，尽量减少全局变量的使用。

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