使用Webpack和babel-loader进行转译时，TypeGraphQL @Arg装饰器因解析器错误而失败

问题描述

限时删除！！

我正在使用typegraphql从装饰有@Resolver批注的typescript类中生成一个graphql解析器.只要不添加 @Arg 装饰器为我的resolver方法定义参数，我就可以使用webpack和babel-loader来转译/捆绑我的源代码.

I am using typegraphql to produce a graphql resolvers from typescript classes decorated with the @Resolver annotation. I am able to transpile/bundle my source code with webpack and babel-loader as long as I do not add the @Arg decorator to define an argument for my resolver method.

以下是我的webpack配置(至少是与我相关的部分):

Following is my webpack configuration (at least the section that me be relevant):

loader: "babel-loader",
options: {
    presets: ["@babel/preset-env", "@babel/preset-typescript"],
    plugins: [
        "@babel/plugin-transform-runtime",
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }],
    ],
},

以下是我的解析器，带有 @Arg 装饰器:

Following is my resolver with the @Arg decorator:

@Resolver()
export default class TimesheetResolver implements TimesheetQuery {
    @Query(() => [Timesheet])
    async findAllEmployeeTimesheets(@Arg("employeeId") employeeId: string): Promise<[Timesheet]> {
        ...
    }
}

以下是我的tsconfig文件:

Following is my tsconfig file:

{
    "compilerOptions": {
      /* Basic Options */
      "target": "es2016",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
      "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
      "lib": ["es2016", "esnext.asynciterable"],
      "declaration": true,                      /* Generates corresponding '.d.ts' file. */
      "outDir": "lib",                          /* Redirect output structure to the directory. */
      /* Strict Type-Checking Options */
      "strict": true,                           /* Enable all strict type-checking options. */
      "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
      "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
      /* Experimental Options */
      "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
      "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
    }
  }

Webpack错误:

Webpack error:

ERROR in ./src/api/timesheet/TimesheetQuery.ts 28:48
Module parse failed: Unexpected character '@' (28:48)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       var _findAllEmployeeTimesheets = _asyncToGenerator(
|       /*#__PURE__*/
>       _regeneratorRuntime.mark(function _callee(@Arg("employeeId")
|       employeeId) {
|         var timesheet, timeEntry, workBreak, clockIn, clockOut;
 @ ./src/graphql/server.ts 5:0-64 21:26-43
 @ ./src/index.ts
 @ multi ./src/index.ts

我需要在Webpack配置中包含一个插件或另一个加载程序吗?

Is there a plugin or another loader that I need to include in my webpack configuration?

推荐答案

我添加了 babel-plugin-transform-typescript-metadata 到我的webpack.config.js文件如typegraphql作者所建议.

I added babel-plugin-transform-typescript-metadata to my webpack.config.js fileas suggested by the typegraphql author.

添加新插件解决了我的问题.以下是更新的webpack.config.js

Adding the new plugin fixed my issue. Following is the updated webpack.config.js

use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-typescript"],
                        plugins: [
                            "@babel/plugin-transform-runtime",
                            "babel-plugin-transform-typescript-metadata",
                            ["@babel/plugin-proposal-decorators", { legacy: true }],
                            ["@babel/plugin-proposal-class-properties", { loose: true }],
                        ],
                    },
                },

这篇关于使用Webpack和babel-loader进行转译时，TypeGraphQL @Arg装饰器因解析器错误而失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..