Javascript 在《盖茨比》中使用gsap不会'；你不在生产部门工作吗？

我使用GatsbyJS和Greensock（gsap）。我有一个动画，它在开发环境中工作得非常好，但当我部署到netlify时，它会默默地失败

生产中的奇怪之处： -GSAP加载 -模块加载完毕 -控制台中没有错误

它只是不会触发。我认为这与构建过程有关。我以前在webpack中使用过GSAP，我不知道为什么它不能与gatsby的webpack配置一起使用。如何在盖茨比版本中处理CSS？这可能是原因吗

模块代码：

    import React from 'react';
import Link from 'gatsby-link';
import './navigation.scss';
import * as navAnimation from '../utils/navAnimation.js';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpened: false
    };

    this.menuToggle = this.menuToggle.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  handleClickOutside(e) {
    let clickInHeader = false;
    if (e.path) {
      clickInHeader = e.path.find(node => node.localName === 'header');
    }
    !clickInHeader && this.menuToggle();
  }

  menuToggle(e) {
    if (this.state.isOpened) {
      navAnimation.slideUp();
      document.removeEventListener('click', this.handleClickOutside, true);
    } else {
      navAnimation.slideDown();
      document.addEventListener('click', this.handleClickOutside, true);
    }
    this.setState(prevState => {
      return { isOpened: !prevState.isOpened };
    });
  }

  render() {
    return (
      <header>
        <h1>
          <div className="logo">
            <Link to="/" onClick={this.state.isOpened && this.menuToggle}>
              <span>Seba</span>
              <span>Hewelt</span>
            </Link>
          </div>
        </h1>
        <div id="menu-btn-wrapper">
          <button
            className={this.state.isOpened ? 'menu-btn open' : 'menu-btn'}
            onClick={this.menuToggle}>
            <svg className="stick" viewBox="0 0 70 32">
              <path d="M 5 5 H70 L 5 21" />
              <path d="M 5 15 H70 L 5 31" />
            </svg>
          </button>
        </div>

        <div className="shutter" />

        <nav className="list-nav">
          <ul>
            <li>
              <div className="menu-link" onClick={this.menuToggle}>
                <Link to="/my-work">
                  <span className="menu-span">my work</span>
                </Link>
              </div>
            </li>
            <li>
              <div className="menu-link">
                <Link to="/blog" onClick={this.menuToggle}>
                  <span className="menu-span">blog</span>
                </Link>
              </div>
            </li>
            <li>
              <div className="menu-link">
                <Link to="/#contact" onClick={this.menuToggle}>
                  <span className="menu-span">contact</span>
                </Link>
              </div>
            </li>
          </ul>
        </nav>
      </header>
    );
  }
}

export default Header;

从“React”导入React；
从“盖茨比链接”导入链接；
导入“/navigation.scss”；
将*作为navAnimation从“../utils/navAnimation.js”导入；
类头扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
Isoped:错误
};
this.menuToggle=this.menuToggle.bind（this）；
this.handleClickOutside=this.handleClickOutside.bind（this）；
}
外把手（e）{
让clickInHeader=false；
if（e.path）{
单击inheader=e.path.find（node=>node.localName==='header'）；
}
！单击InHeader&&this.menuToggle（）；
}
菜单切换（e）{
if（this.state.isOpened）{
navAnimation.slideUp（）；
document.removeEventListener（'click'，this.handleClickOutside，true）；
}否则{
navAnimation.slideDown（）；
document.addEventListener（'click'，this.handleClickOutside，true）；
}
this.setState（prevState=>{
返回{isopend:！prevState.isopend}；
});
}
render（）{
返回(
塞巴
他居住


我的作品


博客


接触


);
}
}
导出默认标题；

然后，我将标题模块导入layouts/index.js：

import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';

import './index.scss';

import Header from '../components/Header.js';
import Footer from '../components/Footer.js';

const TemplateWrapper = ({ children }) => (
  <div id=" mainContainer">
    <Helmet
      title="Seb Hewelt. Front-End Developer - building the internets."
      meta={[
        {
          name: 'description',
          content:
            'My personal place in web. Portfolio, blog and contact information. Come say hi!'
        },
        {
          name: 'keywords',
          content: 'Sebastian Hewelt, front-end, web development, javascript'
        }
      ]}
    />
    <Header />
    <div id="container">{children()}</div>
    <Footer />
  </div>
);

TemplateWrapper.propTypes = {
  children: PropTypes.func
};

export default TemplateWrapper;

从“React”导入React；
从“道具类型”导入道具类型；
从“反应头盔”导入头盔；
导入“/index.scss”；
从“../components/Header.js”导入标题；
从“../components/Footer.js”导入页脚；
const TemplateWrapper=（{children}）=>(
{children（）}
);
TemplateWrapper.propTypes={
子项：PropTypes.func
};
导出默认模板包装器；

正如我所说，这在开发中起作用，但在生产中不起作用。这很难调查，因为它发生在代码绑定之后。

---

感谢您的帮助。

嘿！您是否找到解决此问题的方法？如果其他人发现此问题，请查看：