如何加载指标插件？答案

【问题标题】：How do I load the indicators plugin?如何加载指标插件？
【发布时间】：2016-11-11 10:26:17
【问题描述】：

我已经包含了scrollmagic NPM 包，我从 ScrollMagic 文档中得到了它；

“要访问此扩展程序，请包括插件/debug.addIndicators.js。”

如何将指标加载到我的项目中？

这是我的代码：

import ScrollMagic from 'scrollmagic'

var controller = new ScrollMagic.Controller()
var scene = new ScrollMagic.Scene({/*ScrollMagic code inside here*/})
    .addIndicators({name: "Animation trigger"})
    .addTo(controller)

【问题讨论】：

查看这条路径scrollmagic/scrollmagic/uncompressed/plugins。你会发现debug.addIndicators.js。您需要导入此文件。
不工作。我尝试单独导入 debug.addIndicators.js，与滚动魔术一起导入，不同的命令......没有任何事情发生。 addIndicators() 不显示任何内容。当我同时导入它们时，由于名称重叠，出现错误。

标签： meteor npm scrollmagic

【解决方案1】：

请将此部分添加到您的 webpack.config.js

 resolve: {
    alias: {
        "TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
        "TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
        "TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
        "TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
        "ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
        "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
        "debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
    },
  },

然后在你的 js 文件中使用它：

import ScrollMagic from "scrollmagic/scrollmagic/uncompressed/ScrollMagic";
import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap";
import "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators";
import TweenMax from "gsap/src/uncompressed/TweenMax";
import TimelineMax from "gsap/src/uncompressed/TimelineMax";

您可以在这里找到更多信息 -> https://www.grzegorowski.com/scrollmagic-setup-for-webpack-commonjs

附：我做到了，现在它可以工作了。

更新： 上述解决方案适用于旧版本的 GSAP。对于新版本 3+ 你可以在这里找到很好的信息 -> https://greensock.com/forums/topic/20434-react-gsap-scrollmagic-animationgsap-not-found/

我使用 ScrollMagic 2.0.7 和 GSAP 3.6.0 的导入看起来：

import ScrollMagic from "scrollmagic";
import "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators";
import { gsap, Power1 } from "gsap";
import { TweenMax, TimelineMax } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

别忘了安装 scrollmagic、gsap 和 scrollmagic-plugin-gsap

【讨论】：