Question

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

.ts文件引用.graphql文件，如下所示：

import SchemaDefinition from './schemaDefinition.graphql';

错误是

data / schema / index.ts（2,30）：错误TS2307：找不到模块'./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文件，使用以下内容：{{3} }

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

Answer 1

如果要在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

Answer 2

假设graphql文件有一个JS扩展，所以如果它们没有导出任何内容或者什么都没有导入它们就会被处理你可以尝试不推荐的

import“./ my-module.js”;

Answer 3

另一种解决方法是通过命令行将cp .graphl文件发送到输出文件夹

使用graphql文件编译Typescript时出错

3 个答案: