使用 graphql 文件编译 Typescript 时出错

Posted 2023-03-08

【中文标题】使用 graphql 文件编译 Typescript 时出错

【英文标题】：Error compiling Typescript with graphql files

【发布时间】：2017-10-04 17:30:53

【问题描述】：

所以我是这个领域的新手，问题是我正在尝试编译一个带有 graphql 文件的 Typescript 项目（带有.graphqlextension）。 它基于无服务器框架，所以为了编译它，我启动了npm start，它在命令行中启动了cd src/app && tsc。

.tsfile 像这样引用.graphqlfile：

import SchemaDefinition from './schemaDefinition.graphql';

错误是

data/schema/index.ts(2,30)：错误 TS2307：找不到模块 './schemaDefinition.graphql'。

我认为这里的问题在于tsccompilation，因为它创建了输出目录（../../built），但它没有复制.graphqlfiles。这是我的tsconfig.json 文件：

    "compilerOptions": 
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "lib": ["dom", "es6"],
        "module": "commonjs",
        "allowJs": true,
        "moduleResolution": "node",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "rootDir": "./",
        "outDir": "../../built",
        "sourceMap": true,
        "pretty": true,
        "typeRoots": [
            "node_modules/@types"
        ],
        "types": [
            "@types/node",
            "@types/graphql"
        ],
        "allowSyntheticDefaultImports": true
        ,
    "include": [
        "./*"
    ],
    "exclude": [
            "node_modules"
    ]

我不确定我是否必须采取一些技巧来复制这些文件或使用预编译器步骤来转换 .tsfiles 中的 .graphqlfiles，使用类似这样的东西：GraphQL Code Generator

有什么想法吗？我被卡住了：S

【参考方案1】：

另一种解决方法是通过自动脚本将.graphql 文件复制到输出文件夹，例如https://www.npmjs.com/package/copy

【参考方案2】：

如果你在 NodeJS 中打包 bankckend，它应该在 webpack.config.js 文件和 typings.d.ts 文件中配置，这样编辑器和打包器都知道这些文件。

typings.d.ts:

declare module "*.graphql" 
    const value: any;
    export default value;

代码：

import * as query from query.graphql

为此，使用 Webpack 的加载器（例如 raw-loader）将起作用。

module: 
  rules: [
     test: /\.json$/, loader: 'json-loader' ,
     test: /\.html$/, loader: 'raw-loader' ,
     test: /\.graphql$/, loader: 'raw-loader' ,
  ]

此示例取自 https://github.com/apollographql/graphql-tools/issues/273，那里正在积极讨论不同的方法。

这是一个 GitHub 存储库，它的功能大致相同，但具有更强大的解决方案：https://github.com/webpack-contrib/copy-webpack-plugin

另一方面，如果您正在打包前端，有一个方便的插件可以为您完成这项工作：https://www.npmjs.com/package/webpack-graphql-loader

【参考方案3】：

假设 graphql 文件具有 JS 扩展名，因此如果它们不导出任何内容或不导入任何内容，您可以尝试不推荐的方式进行处理

导入“./my-module.js”；