使用 graphql 文件编译 Typescript 时出错

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文件，使用这样的东西：GraphQL 代码生成器

有什么想法吗？我被卡住了：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