javascript - Gatsby 构建后 ScrollMagic 失去功能

Question

问题:我尝试通过 NPM 向 Gatsby 实现 ScrollMagic。虽然在开发期间 (gatsbydevelop) ScrollMagic 可以工作，但在 gatsbybuild 和 gatsbyserve 之后 ScrollMagic 要么显示错误，要么失去其功能(这两个步骤都描述了)如下)。

我想要实现什么？在 Gatsby 构建之后工作 ScrollMagic。

我将非常感谢您的所有提示!

<小时/>

<强>1。我所做的步骤:当你尝试使用 ScrollMagic 构建 Gatsby 项目时，它会显示一个错误:

  36 |  // TODO: temporary workaround for chrome's scroll jitter bug
> 37 |  window.addEventListener("mousewheel", function () {});
     | ^
  38 | 
  39 |  // global const
  40 |  var PIN_SPACER_ATTRIBUTE = "data-scrollmagic-pin-spacer";


  WebpackError: ReferenceError: window is not defined

显然，发生这种情况是因为 Gatsby 使用 Node 环境创建包含静态文件的构建，并且在 Node 中无法访问 window 对象。

因此构建尚未完成且未成功创建。 Gatsby documentation对于这个特定的“窗口未定义问题”(步骤 2)有一个建议。

<小时/>

<强>2。我所做的步骤:我从 Gatsby 网站复制了代码并粘贴到我的 gatsby-node.js 中:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === "build-html") {
        actions.setWebpackConfig({
            module: {
                rules: [
                    {
                        test: /scrollmagic/,
                        use: loaders.null(),
                    }
                ],
            },
        })
    }
}

通过这样做并编写 gatsby build 和 gatsbyserve，Gatsby 成功构建了网络。但是当我进入应该包含 ScrollMagic 的子页面后，它不起作用，并且 ScrollMagic 失去了其功能。

<小时/>

我的 GSAP 和 ScrollMagic 包:

"scrollmagic": "^2.0.5",
"gsap": "^3.2.4"

<小时/>

我的 Gatsby 文件，ScrollMagic 应该在其中发挥其魔力:

import React from "react"
import { graphql, Link } from "gatsby"
import SEO from "../components/SEO"
import Layout from '../layouts/Layout'
import SubpageHeader from '../components/SubpageHeader'
import SubpageItem from '../components/SubpageItem'
import styled from "styled-components"
import { gsap } from "gsap";
import ScrollMagic from 'scrollmagic';

export const query = graphql`
{
    prismic {
        allAbouts {
            edges {
                node {
                short_footer_text
                }
            }
        }
        allProjectssubpages {
            edges {
                node {
                    intro_text_to_projects
                    ordered_projects {
                        link_to_project {
                            ... on PRISMIC_Project {
                                _meta{
                                    uid
                                }
                                project_title
                                project_description
                                photos {
                                    photo
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
`

const MainContainer = styled.div`
    margin: 6rem 15vw 0;
    display: flex;
`

const ItemsContrainer = styled.div`
    width: 45vw;
`

const LinksContainer = styled.div`
    width: 25vw;
`

const LinksInnerContainer = styled.div`
    display: flex;
    flex-direction: column;
`
const LinkTag = styled(Link)`
    text-decoration: none;
    font-size: 16px;
    color: #000;
    margin-bottom: 15px;
    letter-spacing: 2px;
    opacity: 0.5;
`

class projects extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount = () => {
        const projectssubpageData = this.props.data.prismic.allProjectssubpages.edges.slice(0, 1).pop()
        const orderedProjects = projectssubpageData.node.ordered_projects;

        if (typeof window !== 'undefined') {
            let controller = new ScrollMagic.Controller();
            const itemsContainerHeight = document.querySelector('#items-container').clientHeight;
            const linksContainerHeight = document.querySelector('#links-inner-container').clientHeight;
            const height = itemsContainerHeight - linksContainerHeight;

            let scene = new ScrollMagic.Scene({ triggerElement: "#main-container", triggerHook: 0.25, duration: height })
                .setPin("#links-container")
                .addTo(controller);

            orderedProjects.forEach(project => {
                let uidOfProject = project.link_to_project._meta.uid;
                let projectDivHeight = document.querySelector(`.${uidOfProject}`).clientHeight;

                let scene = new ScrollMagic.Scene({ triggerElement: `.${uidOfProject}`, triggerHook: 0.4, duration: projectDivHeight })
                    .setClassToggle(`#${uidOfProject}`, "active")
                    .addTo(controller);
            });
        }
    }

    render() {
        const footerData = this.props.data.prismic.allAbouts.edges.slice(0, 1).pop()
        const projectssubpageData = this.props.data.prismic.allProjectssubpages.edges.slice(0, 1).pop()
        if (!projectssubpageData || !footerData) return null

        return (
            <>
                <SEO title="Projects" />
                <Layout
                    footerShortText={footerData.node.short_footer_text[0].text}
                    footerLinksArray={[
                        {
                            name: 'All Events',
                            URL: '/events'
                        },
                        {
                            name: 'Diary',
                            URL: '/diary'
                        },
                        {
                            name: 'Home',
                            URL: '/'
                        }
                    ]}>
                    {/* Subpage header */}
                    <SubpageHeader headline={"PROJECTS"} introText={projectssubpageData.node.intro_text_to_projects[0].text}></SubpageHeader>

                    <MainContainer id="main-container">
                        {/* Links to the projects */}
                        <LinksContainer id="links-container">
                            <LinksInnerContainer id="links-inner-container">
                                {projectssubpageData.node.ordered_projects.map(project => (
                                    <LinkTag
                                        to={"projects/" + project.link_to_project._meta.uid}
                                        key={project.link_to_project._meta.uid}
                                        id={project.link_to_project._meta.uid}>
                                        {project.link_to_project.project_title[0].text}
                                    </LinkTag>
                                ))}
                            </LinksInnerContainer>
                        </LinksContainer>

                        {/* All projects */}
                        <ItemsContrainer id="items-container">
                            {projectssubpageData.node.ordered_projects.map(project => (
                                <SubpageItem
                                    itemURL={"projects/" + project.link_to_project._meta.uid}
                                    photoURL={project.link_to_project.photos[0].photo.url}
                                    photoAlt={project.link_to_project.photos[0].photo.alt}
                                    title={project.link_to_project.project_title[0].text}
                                    description={project.link_to_project.project_description[0].text}
                                    divClass={project.link_to_project._meta.uid}
                                    key={project.link_to_project._meta.uid}>
                                </SubpageItem>
                            ))}
                        </ItemsContrainer>
                    </MainContainer>
                </Layout>
            </>
        )
    }
}

export default projects

Answer 1

我做了一个似乎有效的解决方法，所以我将其发布在这里。我没有在文档开头实现scrollmagic，而是在调用componentDidMount之后并且在我可以100%确定窗口对象存在之后实现它。

给你:

componentDidMount = () => {
        if (typeof window !== 'undefined') {
            import('scrollmagic').then((ScrollMagic) => {
                 // your scrollmagic code here
                 let controller = new ScrollMagic.Controller();
                 // ....
            });
        }
    }

这样错误就会消失，因此不需要步骤 2(问题中的步骤 2)。