Laravel中Webpack打包HTML主题JS库：TimelineMax/TweenMax找不到如何解决？

问题背景 #

原本在HTML中通过单独的<script>标签引入各类JS文件可正常运行：

<script src="js/jquery.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" ></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.js'></script>

迁移到Laravel项目后，将文件下载到本地并通过import方式打包，修改app.js如下：

import '../assets/js/jquery.min.js';
import '../assets/libraries/gsap.min.js';
import '../assets/libraries/ScrollTrigger.min.js';
import '../assets/libraries/ScrollToPlugin.min.js';
import '../assets/libraries/Draggable.min.js';
import '../assets/libraries/EasePack.min.js';
import '../assets/libraries/ScrollMagic.min.js';
import '../assets/libraries/animation.gsap.min.js';
import '../assets/libraries/three.min.js';
import '../assets/libraries/imagesloaded.pkgd.min.js';

但Webpack抛出错误：

ERROR in ./resources/assets/libraries/animation.gsap.min.js
Module not found: Error: Can't resolve 'TimelineMax' in 'path\to\file'

ERROR in ./resources/assets/libraries/animation.gsap.min.js
Module not found: Error: Can't resolve 'TweenMax' in 'path\to\file'

webpack compiled with 2 errors

已知可以通过window.$ = window.jQuery = require('jquery');解决jQuery全局依赖问题，现需处理GSAP的TimelineMax/TweenMax让animation.gsap插件能找到它们。

解决方案 #

GSAP 3.x已将旧版的TimelineMax、TweenMax整合进核心gsap对象中（gsap.timeline对应TimelineMax，gsap.to/gsap.from等方法对应TweenMax的功能），但animation.gsap.min.js是基于旧版GSAP的全局变量编写的，因此需要手动将这些别名挂载到全局window对象上，让插件能访问到。

修改app.js的导入顺序和内容：

// 先导入jQuery并挂载全局
import $ from '../assets/js/jquery.min.js';
window.$ = window.jQuery = $;

// 导入GSAP核心并挂载全局，同时添加旧版别名
import gsap from '../assets/libraries/gsap.min.js';
window.gsap = gsap;
// 为兼容旧版插件，映射TimelineMax和TweenMax
window.TimelineMax = gsap.timeline;
window.TweenMax = gsap.to;

// 导入GSAP的其他插件
import '../assets/libraries/ScrollTrigger.min.js';
import '../assets/libraries/ScrollToPlugin.min.js';
import '../assets/libraries/Draggable.min.js';
import '../assets/libraries/EasePack.min.js';

// 导入ScrollMagic及其GSAP插件
import '../assets/libraries/ScrollMagic.min.js';
import '../assets/libraries/animation.gsap.min.js';

// 导入其他依赖库
import '../assets/libraries/three.min.js';
import '../assets/libraries/imagesloaded.pkgd.min.js';

原理说明 #

• Webpack打包时会按导入顺序加载模块，先确保GSAP核心被导入并挂载到全局，再加载依赖它的animation.gsap.min.js。
• 手动映射TimelineMax和TweenMax到GSAP 3.x的对应方法，让旧插件能正常识别这些全局变量，避免模块找不到的错误。

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