使用 webpack 和 babel-loader 进行编译时，TypeGraphQL @Arg 装饰器失败并出现解析器错误

Question

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

以下是我的 webpack 配置（至少是我相关的部分）：

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 装饰器的解析器：

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

以下是我的 tsconfig 文件：

{
    "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 错误：

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 配置中是否需要包含插件或其他加载器？

Answer 1

我将babel-plugin-transform-typescript-metadata 添加到我的 webpack.config.js 文件中 as suggested 来自 typegraphql 作者。

添加新插件解决了我的问题。以下是更新后的 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 }],
                        ],
                    },
                },