不能在模塊、Typescript、WebdriverIO 之外使用導入語句

Question

在此先感謝您的幫助。

這個問題似乎在其他地方被問過和回答過，但我相信我已經嘗試了所有這些解決方案，但未能取得真正的進展。

我正在嘗試為 webdriverIO 創建一個自定義記者。 但是，當所有導入都在運行時，我收到以下錯誤：

語法錯誤：不能在模塊外使用導入語句

如果我嘗試執行wdio.conf文件頂部的 import 語句，我會在import WebdriverTestrailsReporter行上收到上述錯誤。 我可以通過使用 require 來解決這個問題，但是在import WDIOReporter from '@wdio/reporter'從我的打字稿類執行導入時遇到相同的錯誤。

當我嘗試將"type": "module"到我的 package.json 時，我收到一個新錯誤：

錯誤 [ERR_REQUIRE_ESM]：必須使用導入來加載 ES 模塊：/Users/XXXXX/WebstormProjects/integration_test_framework/wdio.conf.local.js 不支持 ES 模塊的 require()。 來自 /Users/XXXXX/WebstormProjects/integration_test_framework/node_modules/@wdio/config/build/lib/ConfigParser.js 的 /Users/XXXXX/WebstormProjects/integration_test_framework/wdio.conf.local.js 的 require() 是一個 ES 模塊文件，如它是一個 .js 文件，其最近的父 package.json 包含“type”：“module”，它將該包范圍內的所有 .js 文件定義為 ES 模塊。 而是將 wdio.conf.local.js 重命名為以 .cjs 結尾，更改需要的代碼以使用 import()，或從 /Users/n1531435/WebstormProjects/integration_test_framework/package.json 中刪除“type”:“module”。

使用 cjs 文件擴展名讓我回到我開始時的導入錯誤。 我無法更改所需的代碼，因為它存在於WDIO ConfigParser而不是我的項目中。

我還使用了 tsconfig 中的值，包括目標值（es2015、es2017），但似乎沒有任何效果。 有任何想法嗎？

據我了解，此設置中有 4 個相關文件。 我已將它們復制到下面：

• 配置文件
• 配置文件
• package.json和我的wdio自定義 Reporter

相關文件片段：

配置文件

//const WebdriverTestrailsReporter = require('./src/test/ui/WebdriverTestrailsReporter.js');
import WebdriverTestrailsReporter from './src/test/ui/WebdriverTestrailsReporter';

var isHeadless = process.env.HEADLESS === 'TRUE';
var useFirefox = process.env.USE_FIREFOX === 'TRUE';
var useChrome = process.env.USE_CHROME ? process.env.USE_CHROME === 'TRUE' : true;


exports.config = {
    reporters: ['spec', WebdriverTestrailsReporter]

包.json :

{
    "name": REDACTED
    "version": "1.1.0",
    "description": "",
    "main": "index.js",
    "bin": {
        REDACTED
    },
    "publishConfig": {
        "registry": "https://repo.forge.lmig.com/api/npm/npm-releases/"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@wdio/allure-reporter": "^6.4.7",
        "@wdio/cli": "^6.4.5",
        "@wdio/local-runner": "^6.4.5",
        "@wdio/mocha-framework": "^6.4.0",
        "@wdio/sauce-service": "^6.4.6",
        "@wdio/spec-reporter": "^6.4.7",
        "@wdio/sync": "^6.4.5",
        "chromedriver": "^90.0.0",
        "fibers": "^5.0.0",
        "geckodriver": "^1.20.0",
        "husky": "^4.3.0",
        "mocha": "^8.1.1",
        "prettier": "^2.2.0",
        "selenium-webdriver": "^4.0.0-alpha.7",
        "wdio-chromedriver-service": "^6.0.4",
        "wdio-geckodriver-service": "^1.1.1"
    },
    "dependencies": {
        "@types/chai": "^4.2.12",
        "@types/es6-promise": "^3.3.0",
        "@types/mocha": "^8.0.2",
        "@types/node": "^14.11.5",
        "async": "^3.2.0",
        "axios": "^0.20.0",
        "chai": "^4.2.0",
        "date-fns": "^2.16.1",
        "execa": "^4.1.0",
        "graphql": "^15.3.0",
        "graphql-request": "^3.2.0",
        "mocha": "^8.1.1",
        "sleep": "^6.3.0",
        "ts-node": "^9.0.0",
        "typescript": "^4.1.2",
        "typings": "^2.1.1"
    },
    "husky": {
        "hooks": {
            "pre-push": "npm run tsc && npm run prettier"
        }
    }
}

記者（前兩行，我們永遠不會越過他們）

import WDIOReporter from '@wdio/reporter'
import { TestRailConfig } from '../TestRailConfig';

配置：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "sourceMap": true,
        "skipLibCheck": true,
        "lib": ["es6"],
        "outDir": "lib",
        "types": ["node", "@wdio/sync", "@wdio/mocha-framework"]
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

Answer 1

如果您使用 require 則使用該格式的所有內容，否則如果您想使用 import 則添加模塊類型並替換所有 require 以導入。

如果您想在某些文件中使用 require 並在某些文件中導入，則將文件重命名為 .cjs，其中包含 require 而不是 .js。 請注意，您不能在一個文件中將 ES6 和常見的 js 格式混合在一起。 您應該在該文件中使用 require 或 import。

最佳實踐是在使用打字稿時使用 E6，

Answer 2

你有沒有想過這個？ 我有同樣的問題