使用 graphql 文件编译 Typescript 时出错

Question

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

.ts 文件引用 .graphql 文件是这样的：

import SchemaDefinition from './schemaDefinition.graphql';

错误是

data/schema/index.ts(2,30): error TS2307: Cannot find module './schemaDefinition.graphql'.

我认为这里的问题出在 tsc 编译中，因为它创建了输出目录 (../../built) 但它没有复制 .graphql 文件。这是我的 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"
    ]
}

我不确定我是否需要做一些技巧来复制这些文件或使用预编译器步骤将 .graphql 文件转换为 .ts 文件，使用如下：GraphQL Code Generator

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

Answer 1

假设 graphql 文件有一个 JS 扩展名，所以如果它们不导出任何东西或没有导入它们，你可以尝试不推荐的

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

Answer 2

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

Answer 3

如果你在 NodeJS 中打包 banckend，它应该在 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

使用 graphql 文件编译 Typescript 时出错

Error compiling Typescript with graphql files

node.js

typescript

tsc

graphql

serverless-framework