GSAP Flip with Webpack

我试图让基本的GSAP Flip示例与webpack一起使用,但我遇到了这个错误。

未捕获的类型错误:pi不是函数
在main.js上的new t
在main.js上的es
在main.js上的t.getState
在HTMLDocument上。

HTML:

<div class="FlipContainer">
    <div class="FlipSquare" id="sq1">1</div>
    <div class="FlipSquare" id="sq2">2</div>
</div>

JS:

import  gsap  from 'gsap';
import  {Flip}  from 'gsap/all';

gsap.registerPlugin(Flip);

console.log(Flip);

const squares = gsap.utils.toArray(".FlipSquare");

function doFlip() {
  // Get the initial state
  const state = Flip.getState(squares);
  
  // Make DOM or styling changes (swap the squares in our case)
  swap(squares);
  
  // Animate from the initial state to the end state
  Flip.from(state, {duration: 2, ease: "power1.inOut"});
}

// Given an Array of two siblings, append the one that's first so it's last (swap)
function swap([a, b]) {
  a.parentNode.children[0] === a ? a.parentNode.appendChild(a) : a.parentNode.appendChild(b);
}

// click anywhere to flip
document.addEventListener("click", doFlip);

webpack.config

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    plugins: [new MiniCssExtractPlugin({
        filename: 'main.css'
    })],
    mode: 'production',
    entry: './Javascript/Modules/global.js',
    output: {
        path: path.resolve(__dirname, './Dist'),
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/i,
                include: path.resolve(__dirname, 'Javascript'),
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.css$/i,
                include: path.resolve(__dirname, 'Css'),
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
            },
        ],
    },
    devServer: {
        static: 'dist',
        watchContentBase: true
    },
};

日志显示:

t(){}

我用安装了gsap

npm install gsap

我尝试以其他方式导入Flip,但没有任何更改。 很高兴得到每一次帮助,谢谢!