将 gsap 与 nuxtjs 一起使用答案

【问题标题】：Use gsap with nuxtjs将 gsap 与 nuxtjs 一起使用
【发布时间】：2018-06-10 02:15:26
【问题描述】：

我想将 gsap 与 ScrollMagic 结合使用。 ScrollMagic 已经实现并且工作正常，但是当我想使用 animation.gsap 时出现错误

未找到这些依赖项： * TimelineMax 在 ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js * ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 中的 TweenMax

因此我通过 npm 安装了 gsap

npm i gsap

并导入 TimelineMax 和 TweenMax

if (process.browser) {
    const sm = require('ScrollMagic')

    require('gsap/TimelineMax')
    require('gsap/TweenMax')

    require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap')
    require('scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators')

    Vue.prototype.$sm = sm
    Vue.prototype.$smController = new sm.Controller()
}

在我的 nuxt.config.js 文件中，我将 gsap 添加到了供应商数组中

vendor: ['gsap', 'ScrollMagic', 'vuebar', 'vee-validate'],

在我的组件中，我将此代码用于视差效果

new this.$sm.Scene({
    triggerElement: '#js-introduction-paralax',
    triggerHook: 'onEnter'
})
    .duration('200%')
    .setTween('#js-introduction-paralax', {
        backgroundPosition: '50% 100%'
        ease: Linear.easeNone
    })
    .addIndicators()
    .addTo(this.$smController)

但我仍然收到未找到依赖项的错误

更新

我也试过用这种方式导入

import { TweenMax, TimelineMax, Linear } from 'gsap'
or seperated
import TweenMax from 'gsap/TweenMax'; 
import TimelineMax from 'gsap/TimelineMax';

但结果相同

我也尝试制作别名

resolve: {
    modules:[
      path.resolve(__dirname), path.resolve(__dirname, "node_modules")
    ],
    alias: {
        "TweenMax": path.resolve('node_modules', 'gsap/TweenMax'),
        "TimelineMax": path.resolve('node_modules', 'gsap/TimelineMax'),
        "gsap": path.resolve('node_modules', 'gsap'),
    }
},

同样的结果

当我在控制台中写入时

window.TweenMax

我明白了

ƒ (target, duration, vars) {
            TweenLite.call(this, target, duration, vars);
            this._cycle = 0;
            this._yoyo = (this.vars.yoyo === true || !!this.vars.yoyoEase);
            this._repeat = this.vars.repe…

所以加载了一些东西......

【问题讨论】：

您找到解决方案了吗？ :)
我没有在 nuxtjs 中捆绑 tweenmax。我在我的根文件夹中创建了一个 app.html（在那里描述了 nuxtjs.org/guide/views#document），并简单地添加了一个脚本标签来从 cdn 加载 tweenmax。

标签： webpack gsap scrollmagic nuxt.js

【解决方案1】：

它可能对你有用。我也有像你这样的错误，我找到了解决我的问题的方法here。

import ScrollMagic from 'scrollmagic'
import {
    TweenMax,
    TimelineLite
} from 'gsap'

import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'

别忘了做

npm i scrollmagic imports-loader

【讨论】：