在Drupal项目中使用GSAP时遇Uncaught ReferenceError: require未定义问题

错误原因 #

浏览器本身不支持Node.js的require()函数，你遇到的问题是当前环境没正确处理ES模块的import语法，导致代码被转译为浏览器无法识别的CommonJS格式。

两种解决场景 #

场景1：使用Drupal Encore（Webpack）构建前端资源 #

• 先通过npm安装GSAP：

  npm install gsap --save
  

• 确保你的webpack.config.js配置支持ES模块，比如包含以下配置（根据Drupal版本调整）：

  Encore
    // ...其他配置
    .configureBabelPresetEnv((config) => {
      config.useBuiltIns = 'usage';
      config.corejs = 3;
    })
    .enableSingleRuntimeChunk()
  

• 在源JS文件中保留import { gsap } from 'gsap';，执行构建命令：

  npm run build
  

• 最后在主题/模块的libraries.yml中引用构建后的JS文件，而非源文件。

场景2：无需构建工具，直接全局引入GSAP #

• 放弃import语法，改用UMD版本的GSAP（支持全局挂载）。在主题/模块的libraries.yml中添加：

  custom_gsap:
    js:
      https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js: { type: external, minified: true }
      js/custom-gsap-code.js: {}
    dependencies:
      - core/jquery
  

• 在custom-gsap-code.js中直接使用全局的gsap对象即可，比如：

  gsap.to('.target-element', { x: 100, duration: 1 });
  

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