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

Question

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

到目前为止，我试图让奖金插件在 Nuxt 中运行：

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

我下载了 bonus-files-for-npm-users 包并将所有文件放在 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');
        };
    }
}

我的问题是： 如何让多个 GSAP 奖励插件在 Nuxt.js 中运行？

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";

现在按预期工作。