SyntaxError: Unexpected token { - 将 WebDriverio 项目转换为 Typescript 时出错答案

【问题标题】：SyntaxError: Unexpected token { - Error when converting WebDriverio project to TyprscriptSyntaxError: Unexpected token { - 将 WebDriverio 项目转换为 Typescript 时出错
【发布时间】：2019-07-24 22:36:45
【问题描述】：

我正在尝试按照https://webdriver.io/docs/typescript.html 将我的 webdriver.io + cucumber 项目转换为 Typescript，并收到错误消息“Unexpected toke {”。我正在使用 WebDriver.io + TypeScript + Cucumber。

在 wdio.conf.js 中，我有 cucumberOpts 如下

cucumberOpts: {
    requireModule: [
            'tsconfig-paths/register',
        () => { require('ts-node').register({files: true}) },
    ],
    require: ['./src/step_definitions/*.ts'],
    backtrace: false,   
    requireModule: [],
    dryRun: false,      
    failFast: false,    
    format: ['pretty'], 
    colors: true,       
    snippets: true,     
    source: true,       
    profile: [],        
    strict: false,      
    tags: [],           
    timeout: 60000,     
    ignoreUndefinedDefinitions: false,
},

我的 tsconfig.json 如下所示

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [ "./*" ],
        "src/*": ["./src/*"]
    },
    "types": ["node", "@wdio/sync","jest"]
  },

  "include": [
      "./src/**/*"
  ]
}

我的文件夹结构如下

src/features/
src/step_definitions
src/pageObjects

我的步骤定义如下作为第一条语句

step.ts

import { Given, When, Then } from "cucumber";

包.json

"scripts": {
    "test":"./node_modules/.bin/wdio wdio.conf.js"
  },

当我运行测试时，我在 step.ts 的上述第一行收到错误消息“SyntaxError: Unexpected token {”。

如何解决此错误。

【问题讨论】：

你好！你会得到 ES6 import 语句的错误原因。看起来编译器不批准包含的库版本。我会尝试起草一个答案，但如果您使用相关的package.json 依赖项（ts-node、所有@types 等）更新答案，我将不胜感激。

标签： typescript cucumber webdriver-io cucumberjs

【解决方案1】：

说实话，你的tsconfig.json 配置文件看起来不错，我唯一关心的是"target" 编译器选项。

通常， 使用 "target": "es6" 选项，将注入以下库列表：DOM、ES6、DOM.Iterable 和 ScriptHost .所以import 应该不会抛出任何错误，因为包含了 ES6 模块库。

我会尝试通过 "lib" compiler option 向编译器明确建议该库。

以下内容对我有用：

{
  "compilerOptions": {
    "lib": [
        "dom",
        "es7" // or es2016, es2017, es2018 ...
    ],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [ "./*" ],
        "src/*": ["./src/*"]
    },
    "types": ["node", "@wdio/sync","jest"]
  },

!注意： 其他库版本包括：'ES3'（默认）、'ES5'、'ES2015'、'ES2016'、'ES2017'、@987654337 @，或'ESNEXT'。

【讨论】：

【解决方案2】：

我通过将 Typescript 文件编译为 Javascript 文件然后在 cucumberOpts => 要求中提供 Javascript 文件的位置来使其工作

【讨论】：