函数前面与末尾的导出模块

Posted 2023-03-08

【中文标题】函数前面与末尾的导出模块

【英文标题】：Export module in front of function vs at end

【发布时间】：2019-08-23 04:33:06

【问题描述】：

我正在 GatsbyJS 中开发一个应用程序，exporting 我的 GraphQL 片段之一是这样的：

import  graphql  from 'gatsby';

export const w300Image = graphql`
  fragment w300Image on File 
    childImageSharp 
      fluid(maxWidth: 300) 
        ...GatsbyImageSharpFluid
        presentationWidth
      
    
  
`;

export const squareImage = graphql`
  fragment squareImage on File 
    childImageSharp 
      fluid(maxWidth: 200, maxHeight: 200) 
        ...GatsbyImageSharpFluid
        presentationWidth
      
    
  
`;

我 import 并像这样使用 squareImage：

import React from 'react';
import  useStaticQuery, graphql  from 'gatsby';
import  squareImage  from '../graphql/imageFragments';
import NonStretchedImage from './nonStretchedImage';

const Image = () => 
  const data = useStaticQuery(graphql`
    query 
      astronaut: file(relativePath:  eq: "gatsby-astronaut.png" ) 
        ...squareImage
      
    
  `);
  return <NonStretchedImage fluid=data.astronaut.childImageSharp.fluid  />;
;

注意：我的 IDE 警告我 squareImage import 永远不会被读取。但是，由于这不是真的，我假设它只是无法在 GraphQL 查询中获取它的存在。

问题

如果我将export 更改为以下内容（即将export 移动到文件末尾），它会在编译时崩溃并显示以下错误消息：

错误：不变违规：GraphQLCompilerContext：未知文档 squareImage.

新的导出代码（唯一的区别是exports 移到了末尾）：

import  graphql  from 'gatsby';

const w300Image = graphql`
  fragment w300Image on File 
    childImageSharp 
      fluid(maxWidth: 300) 
        ...GatsbyImageSharpFluid
        presentationWidth
      
    
  
`;

const squareImage = graphql`
  fragment squareImage on File 
    childImageSharp 
      fluid(maxWidth: 200, maxHeight: 200) 
        ...GatsbyImageSharpFluid
        presentationWidth
      
    
  
`;

export  squareImage, w300Image ;

知道这里发生了什么吗？我以为这两个exports 是一样的？也许摇树只在一种情况下发生？

编辑

在import后面加了console.log(squareImage)，还是出现错误。换句话说，摇树不是罪魁祸首。

【问题讨论】：

出于调试目的，在您的import squareImage from '../graphql/imageFragments'; 后面加上console.log(squareImage)。这看起来是对的吗？

@Mike'Pomax'Kamermans 是的，我只是在发帖后这样做了。没有效果。所以摇树不是问题。

这些是真正的模块，还是在执行之前通过转译器运行？ （例如 rollup 和 done 与 babel + webpack 等）

@Mike'Pomax'Kamermans 通过 GtasbyJS 运行它，它在后台使用 webpack。它是在构建过程中失败的。

在这种情况下，我可能会建议先完成minimal reproducible example 练习。将您的项目复制到一个新目录，删除除主入口点和单个模块之外的所有内容，看看您是否甚至可以在没有 graphql 或 react 的情况下将其捆绑，因为这是与模块加载相关的问题。删除其他可能性是一个相当快速但有价值的测试（如果即使使用香草 JS 模块仍然很糟糕，您也可以更新帖子）

【参考方案1】：

TL:DR：您无需导入片段即可在 Gatsby 查询中使用它

Gatsby pulls graphql fragments & queries out of your file 并独立执行它们。因此，导出/导入 graphql 片段的工作方式略有不同。

由于所有查询都位于同一个命名空间中，一旦您在任何文件中导出命名片段，它就可以“全局”使用，即您可以在其他查​​询和片段中使用它而无需显式导入它们。

这就是为什么您可以使用片段 GatsbyImageSharpFluid 而无需在代码中的任何位置导入它。

更新： Gatsby 只查找 query inside tagged template in named export 即 export const queryName = graphql``，这解释了为什么在切换导出样式时它会中断。

【讨论】：

谢谢，德里克，有帮助。但是，问题仍然存在。从函数前面的导出切换到底部的导出，中断构建。即使您放弃导入。

@Magnus 啊，我的错，我已经更新了答案并链接到提取查询的感兴趣的代码行