javascript - Tweenmax 轻松和 ESLINT

Question

我使用 Babel 的 ES6 transpiller 和 Tweenmax 作为我的动画库，它提供了一些存储缓动曲线的对象，例如 Back、Sine 等。

事实是，我也在使用 Eslint，并且这些缓动对象打破了 no-undef 规则(我不想禁用该规则)。

JS 示例:

import TweenMax from 'gsap';

TweenMax.fromTo('.header__logo', .5, {y: -70, alpha: 0}, {y: 0, alpha: 1, delay: .4, ease: Back.easeOut});

控制台:

   97:98   error  "Back" is not defined         no-undef
   98:110  error  "Back" is not defined         no-undef
   99:109  error  "Back" is not defined         no-undef
  105:85   error  "Sine" is not defined         no-undef
  107:117  error  "Back" is not defined         no-undef
  108:125  error  "Back" is not defined         no-undef
  127:96   error  "Sine" is not defined         no-undef
  133:98   error  "Back" is not defined         no-undef
  134:151  error  "Back" is not defined         no-undef
  159:103  error  "Sine" is not defined         no-undef
  160:111  error  "Sine" is not defined         no-undef
  165:97   error  "Back" is not defined         no-undef
  166:109  error  "Back" is not defined         no-undef
  167:108  error  "Back" is not defined         no-undef

问题

如何让 TweenMax 缓动与 Eslint 配合使用？

Answer 1

好吧，我明白了。

最快的方法是将 GSAP 变量添加到 .eslintrc 文件中的 globals 属性

  "globals": {
    "TimelineLite" : false,
    "TimelineMax" : false,
    "TweenLite" : false,
    "TweenMax" : false,
    "Back" : false,
    "Bounce" : false,
    "Circ" : false,
    "Cubic" : false,
    "Ease" : false,
    "EaseLookup" : false,
    "Elastic" : false,
    "Expo" : false,
    "Linear" : false,
    "Power0" : false,
    "Power1" : false,
    "Power2" : false,
    "Power3" : false,
    "Power4" : false,
    "Quad" : false,
    "Quart" : false,
    "Quint" : false,
    "RoughEase" : false,
    "Sine" : false,
    "SlowMo" : false,
    "SteppedEase" : false,
    "Strong" : false,
    "Draggable" : false,
    "SplitText" : false,
    "VelocityTracker" : false, 
    "CSSPlugin" : false,
    "ThrowPropsPlugin" : false, 
    "BezierPlugin" : false
  }

从 Green Sock forum 检索的属性