问题：我试图通过NPM到Gatsby来实现ScrollMagic。在开发期间（gatsby develop），ScrollMagic可以工作，但在gatsby build和gatsby serve之后，ScrollMagic要么显示错误，要么失去其功能（下面介绍的两个步骤）。
我想实现什么？建立盖茨比后，即可使用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环境创建带有静态文件的构建，并且window对象在Node中不可访问。
因此，构建尚未完成且未成功创建。 Gatsby documentation针对此特定“窗口未定义的问题”提供建议（步骤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 serve，盖茨比成功地建立了网络。但是，当我转到应该包含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
我做了一个似乎可行的解决方法，因此我将其发布在这里。在文档componentDidMount被调用并且可以100％确定window对象存在之后，我将在以后实现它，而不是在文档的开头实现scrollmagic。
您去这里：
componentDidMount = () => {
if (typeof window !== 'undefined') {
import('scrollmagic').then((ScrollMagic) => {
// your scrollmagic code here
let controller = new ScrollMagic.Controller();
// ....
});
}
}
这样，错误消失了，因此不需要步骤2（问题的步骤2）。