如何使用 ESLint 适应 GSAP 的命名空间黑客攻击

How to accommodate GSAP's namespace hacking with ESLint?

本文关键字：命名空间 黑客 攻击 GSAP 何使用 ESLint 适应      更新时间：2023-09-26

背景：GSAP有一个..."不规范"进口报关。例

import TimelineMax from 'gsap';
import GSAP from 'gsap-react-plugin';

令人惊讶的是，尽管需要导入它们，但您从未在任何地方使用这两个对象中的任何一个。发生的情况是将一堆对象加载到全局命名空间中，因此这突然成为可能：

_animateIn() {
    const toggleWrapper = ReactDOM.findDOMNode(this.refs.toggleWrapper);
    TweenLite.set(toggleWrapper, { display: 'block' });
    TweenLite.to(toggleWrapper, 0.3, { opacity: 1 });
  }

我基本上已经接受了这一点，但我在我的 ESLint 配置中无法措辞。

我拥有所有全局变量，因此使用的任何内容都不会抛出：

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

我有"no-unused-vars": [2, {"vars": "local"}]，这样就不会检查全局变量。

但是，这些都不能解决上述导入未在使用其"全局子项"的文件中的任何地方使用的问题，并且 ESLint 仍然抛出。

作为权宜之计，我已经尝试在我们为此目的使用的实用程序文件中window.TimelineMax = TimelineMax;，但这让我觉得杂乱无章。

有没有更好的方法来处理GSAP？

正如@Bergi所说，处理副作用相关库的一种方法是只import 'package';，并让命名空间需要发生的任何事情发生。

相关文章：