使用 webpack 和 babel-loader 进行转译时，TypeGraphQL @Arg 装饰器因解析器错误而失败 [英] TypeGraphQL @Arg decorator fails with parser error when transpiling with webpack and babel-loader

问题描述

我正在使用 typegraphql 从用 @Resolver 注释修饰的打字稿类生成 graphql 解析器.只要我不添加 @Arg 装饰器来定义解析器方法的参数，我就可以使用 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 file as 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 装饰器因解析器错误而失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！