Question

我使用GatsbyJS和Greensock（gsap）。我有一个在开发环境中完美运行的动画，但是当我部署到netlify时，它会无声地失败。

制作中有什么奇怪之处： - GSAP加载 - 模块加载 - 控制台中没有错误。

它不会触发。我认为这与构建过程有关。我之前使用过GSAP和webpack，我不知道为什么它不适用于gatsby的webpack配置。如何在gatsby构建中处理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;

然后我将Header模块导入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;

正如我所说，这适用于开发，但不适用于生产。这很难调查，因为它发生在代码捆绑之后。任何帮助表示赞赏。

有没有明显的理由为什么在gatsby中使用gsap不能在生产中使用？

0 个答案: