我正在使用 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 配置中是否需要包含插件或其他加载器?
最佳答案
我添加了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 }],
],
},
},
关于typescript - 使用 webpack 和 babel-loader 进行转译时,TypeGraphQL @Arg 装饰器失败并出现解析器错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60017598/