如何在Nuxt.js中使用GSAP Bonus插件？

Question

我使用https://github.com/nuxt-community/starter-template进行了全新的本地安装。我的依赖项是 gsap 2.0.1 和 nuxt 1.0.0 。

到目前为止，我一直在尝试使奖励插件在Nuxt中运行：

1-node_modules中的所有奖励文件并通过页面文件导入（不起作用）

我下载了软件包可供npm用户使用的奖励文件，并将所有文件放入 node_modules / gsap / 中。

在我的页面文件 index.vue 中，我这样引用了GSAP：

import { TweenMax } from 'gsap'; 
import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin';
// I also tried:
// import MorphSVGPlugin from 'gsap/MorphSVGPlugin';

TweenMax运行正常，但是插件没有：

S:\Vue\myPath\node_modules\gsap\MorphSVGPlugin.js:14
import { _gsScope } from "gsap/TweenLite.js";
^^^^^^
SyntaxError: Unexpected token import

2-根文件夹中的所有奖励文件，并通过页面文件导入Tweenmax，并通过nuxt.config.js导入奖励插件（不起作用）

我将所有奖励插件文件移到了根目录 / gsap 。我将TweenMax的导入保留在页面文件中，因为它可以正常工作。在我的 nuxt.config.js 中，我尝试了以下配置，在其他项目中我发现该配置大致相同：

    build: {
        extend(config, { isDev, isClient }) {
            if (isDev && isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                })
            };
            if (isClient) {
                config.entry.app.push('gsap', '/gsap/MorphSVGPlugin');
                // I also tried:
                // config.entry.app.push('gsap', '~/gsap/MorphSVGPlugin');
            };
        }
    }

3-静态文件夹中的所有奖励文件，并通过页面文件导入Tweenmax，并通过nuxt.config.js导入奖励插件（有效，但仅适用于一个奖励插件）

我将所有奖励插件都移至了 / static / gsap / 。万岁！我的红利插件现在可以使用了。在 nuxt.config.js 中使用以下配置：

build: {
    extend(config, { isDev, isClient }) {
        if (isDev && isClient) {
            config.module.rules.push({
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /(node_modules)/
            })
        };
        if (isClient) {
            config.entry.app.push('gsap', '~/static/gsap/MorphSVGPlugin');
        };
    }
}

不幸的是，我只有一个这样的奖励插件。这不起作用：

build: {
    extend(config, { isDev, isClient }) {
        if (isDev && isClient) {
            config.module.rules.push({
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /(node_modules)/
            })
        };
        if (isClient) {
            config.entry.app.push('gsap', '~/static/gsap/MorphSVGPlugin');
            config.entry.app.push('gsap', '~/static/gsap/SplitText');
            config.entry.app.push('gsap', '~/static/gsap/DrawSVGPlugin');
            config.entry.app.push('gsap', '~/static/gsap/GSDevTools');
        };
    }
}

我的问题是： 如何在Nuxt.js中使用几个GSAP奖励插件？

Answer 1

妥协的解决方案：仅在使用静态资源时，它才能运行。

script: [
  { src: 'gsap/TweenMax.min.js' },
  { src: 'gsap/MorphSVGPlugin.min.js' },
  { src: 'gsap/SplitText.min.js' },
  { src: 'gsap/DrawSVGPlugin.min.js' },
  { src: 'gsap/GSDevTools.min.js' }
]

但是我真的很想知道如何将GSAP奖励插件与 node_modules 和常规构建过程一起使用。

Answer 2

创建插件gsap.js：

import gsap from 'gsap'

if (process.client) {
  gsap.registerPlugin()
}

通常将插件导入nuxt.config中。

就是这样。

Answer 3

对于来自Google的其他任何人。现在，GreenSock中的ZIP包含src/bonus-files-for-npm-users/umd/CustomEase.js，您可以将其放入本地文件夹中，然后将其导入Vue组件中。

import CustomEase from "../vendor/gsap/CustomEase";

现在可以正常使用了。