使用ESbuild打包含GSAP的项目时出现未初始化错误求助

一、修复“GSAP hasn't been initialized”错误 #

1. 调整ESbuild的代码压缩配置 #

打包后的错误提示指向类继承时super()未正确调用，大概率是ESbuild的标识符压缩破坏了GSAP内部的类结构。可以在生产环境构建时禁用标识符压缩：

修改ESbuild配置中的minify选项：

minify: PRODUCTION ? {
  syntax: true,       // 保留语法压缩
  whitespace: true,   // 保留空白压缩
  identifiers: false, // 禁用标识符重命名
} : false,

或者单独设置：

minifyIdentifiers: !PRODUCTION, // 生产环境禁用标识符压缩

2. 修改GSAP导入方式 #

尝试使用默认导入代替命名导入，避免模块导出解析问题：

// 替换原导入代码
import gsap from 'gsap';

const name = 'Hello World';
const tl = gsap.timeline();

3. 验证GSAP版本兼容性 #

确保使用的GSAP版本与ESbuild的target配置兼容。如果当前GSAP版本较高，可尝试将生产环境的target从es2019升级到es2020或更高：

target: PRODUCTION ? 'es2020' : 'esnext',

二、优化打包体积过大问题 #

1. 开启精准Tree Shaking #

ESbuild默认开启Tree Shaking，但可显式配置确保仅打包用到的模块：

treeShaking: true, // 显式开启Tree Shaking

2. 按需导入GSAP模块 #

只导入需要的GSAP核心和功能模块，避免打包整个库：

// 仅导入核心库和Timeline模块
import { gsap } from 'gsap/core';
import { Timeline } from 'gsap/Timeline';

// 注册Timeline插件
gsap.registerPlugin(Timeline);

const tl = gsap.timeline();

3. 启用ESbuild的代码分割（可选） #

如果项目复杂，可通过splitting: true开启代码分割，将GSAP等第三方依赖单独打包：

splitting: true,

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