Javascript ScrollMagic在盖茨比构建后失去功能

问题： 我试图通过NPM向盖茨比实现ScrollMagic。在开发过程中（

gatsby develop

）ScrollMagic工作时，在

gatsby build

和

gatsby service

之后，ScrollMagic要么显示错误，要么失去其功能（这两个步骤如下所述）

我想要实现什么？ 盖茨比建造后的魔法工作

谢谢你给我的提示

---

1。我做的步骤：当您尝试使用ScrollMagic构建盖茨比项目时，它将显示一个错误：

  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

显然，这是因为盖茨比使用节点环境创建包含静态文件的构建，并且在节点中无法访问窗口对象

因此，生成未完成且未成功创建。针对此特定的“窗口未定义问题”（步骤2）提供建议

---

2。我做的步骤： 我从盖茨比网站复制了代码并粘贴到我的

Gatsby node.js

：

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

通过这样做并编写

gatsby build

和

gatsby service

，gatsby成功地构建了web。但是，在我转到应该包含ScrollMagic的子页面之后，它就不工作了，ScrollMagic失去了它的功能

---

我的GSAP和ScrollMagic软件包：

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

---

我的盖茨比文件，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

从“React”导入React
从“盖茨比”导入{graphql，Link}
从“./组件/SEO”导入SEO
从“../layouts/Layout”导入布局
从“../components/SubpageHeader”导入子页面标题
从“../components/SubpageItem”导入子页面项
从“样式化组件”导入样式化
从“gsap”导入{gsap}；
从“ScrollMagic”导入ScrollMagic；
export const query=graphql`
{
棱镜{
阿拉博茨{
边缘{
节点{
短页脚文本
}
}
}
所有项目页面{
边缘{
节点{
项目简介
已订购的项目{
链接到项目{
…关于PRISMIC_项目{
_元{
液体
}
项目名称
项目描述
照片{
照片
}
}
}
}
}
}
}
}
}
`
const MainContainer=styled.div`
保证金：6rem 15vw 0；
显示器：flex；
`
const itemscontainer=styled.div`
宽度：45vw；
`
const linkscocontainer=styled.div`
宽度：25vw；
`
const linksinkercontainer=styled.div`
显示器：flex；
弯曲方向：立柱；
`
const LinkTag=已设置样式（链接）`
文字装饰：无；
字体大小：16px；
颜色：#000；
边缘底部：15px；
字母间距：2px；
不透明度：0.5；
`
类项目扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount=（）=>{
const projectssubpage data=this.props.data.prismic.allprojectssubpage.edges.slice（0,1）.pop（）
const orderedProjects=projectssubpageData.node.ordered\u projects；
如果（窗口类型！==“未定义”）{
让controller=new ScrollMagic.controller（）；
const itemsContainerHeight=document.querySelector（“#items container”）.clientHeight；
const linksContainerHeight=document.querySelector（“#links-inner-container”）.clientHeight；
常量高度=项目容器高度-链接容器高度；
let scene=new ScrollMagic.scene（{triggerElement:#主容器），triggerHook:0.25，持续时间：高度}）
.setPin（“链接容器”）
.addTo（控制员）；
orderedProjects.forEach（项目=>{
让uidOfProject=project.link_到_项目。_meta.uid；
让projectDivHeight=document.querySelector（`.${uidOfProject}`）.clientHeight；
let scene=new ScrollMagic.scene（{triggerement:`.${uidOfProject}`，triggerHook:0.4，持续时间：projectDivHeight}）
.setClassToggle（`uidOfProject}`，“活动”）
.addTo（控制员）；
});
}
}
render（）{
const footerData=this.props.data.prismic.allAbouts.edges.slice（0，1.pop（））
const projectssubpage data=this.props.data.prismic.allprojectssubpage.edges.slice（0,1）.pop（）
如果（！projectssubpageData | |！footerData）返回null
返回(
{/*子页面标题*/}
{/*指向项目的链接*/}
{projectssubpageData.node.ordered_projects.map（project=>(
{project.link_to_project.project_title[0]。text}
))}
{/*所有项目*/}
{projectssubpageData.node.ordered_projects.map（project=>(
))}
)
}
}
导出默认项目

我做了一个似乎有效的变通方法，因此我将其发布在这里。我没有在文档的开头实现scrollmagic，而是在调用componentDidMount之后，在我可以100%确定

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