本文介绍了使用 graphql 文件编译 Typescript 时出错的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

So I'm new in this area, the thing is that I'm trying to compile a Typescript project with graphql files on it (with .graphqlextension).It' based on the serverless framework, so to compile it I launch npm startwhich launches a cd src/app && tscin the command line.

.ts 文件像这样引用 .graphql 文件:

The .tsfile references the .graphqlfile like this:

import SchemaDefinition from './schemaDefinition.graphql';

错误是

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

我认为这里的问题出在 tsc 编译中,因为它创建了输出目录 (../../built) 但它没有复制 .graphql 文件.这是我的 tsconfig.json 文件:

I think the issue here is in the tsccompilation, as it creates the output directory (../../built) but it is not copying the .graphqlfiles. Here is my tsconfig.json file:

{
    "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"
    ]
}

我不确定我是否需要做一些技巧来复制这些文件或放置一个预编译器步骤来转换 .ts 文件中的 .graphql 文件,使用像这样:GraphQL 代码生成器

I'm not sure if I have to do some trick to copy these files or put a precompiler step to convert the .graphqlfiles in .tsfiles, using something like this: GraphQL Code Generator

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

Any ideas out there? I'm stuck :S

推荐答案

如果你在 NodeJS 中打包了 banckend,应该在 webpack.config.js 文件和 文件中进行配置>typings.d.ts 文件,所以编辑器和打包器都知道这些文件.

If you are packaging the banckend in NodeJS, it should be configured in the webpack.config.js file and in the typings.d.ts files, so both the editor and the packager knows about these files.

typings.d.ts:

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

代码:

import * as query from query.graphql

为此,使用 Webpack 的人可以使用诸如 raw-loader 之类的加载器.

For this to work, a loader such as raw-loader for those using Webpack will work.

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

此示例取自 https://github.com/apollographql/graphql-工具/问题/273,其中有关于不同方法的积极讨论.

This sample has been taken from https://github.com/apollographql/graphql-tools/issues/273 where there's an active discussion about different approaches.

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

Here is a GitHub repo which does roughly the same but with a more powerful solution: https://github.com/webpack-contrib/copy-webpack-plugin

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

On the other hand, if you are packaging the front, there's a handy plugin to do the work for you: https://www.npmjs.com/package/webpack-graphql-loader

这篇关于使用 graphql 文件编译 Typescript 时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-05 10:13