正在获取语法错误：无法在模块外部使用import语句

Question

我不确定为什么我仍然不能在代码中使用ES6。我已经完成了网上说的一切以添加babel，但是仍然出现此错误-SyntaxError：无法在模块外部使用import语句。我做了npm install并添加了所有依赖项，但仍然不能使用import

这是我的.babelrc：

{
    "presets": ["es2015"]
  }

package.json：

{
  "name": "appium-boilerplate",
  "version": "5.3.1",
  "description": "Run end to end tests with using the webapp and the mobile app",
  "scripts": {
    "android.sauce.rdc.app": "wdio ./config/saucelabs/wdio.android.rdc.app.conf.js",
    "android.app": "wdio ./config/wdio.android.app.conf.js",
    "android.browser": "wdio ./config/wdio.android.browser.conf.js",
    "ios.app": "wdio ./config/wdio.ios.app.conf.js",
    "ios.sauce.rdc.app": "wdio ./config/saucelabs/wdio.ios.rdc.app.conf.js",
    "ios.browser": "wdio ./wdio.conf.js",
    "real.browser": "wdio ./config/wdio.browser.conf.js",
    "lint": "eslint config tests"
  },
  "dependencies": {
    "express": "^4.17.1",
    "morgan": "^1.9.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/register": "^7.5.5",
    "@babel/traverse": "^7.5.5",
    "@babel/types": "^7.5.5",
    "@wdio/appium-service": "^5.12.1",
    "@wdio/cli": "^5.12.4",
    "@wdio/jasmine-framework": "^5.16.15",
    "@wdio/local-runner": "^5.16.15",
    "@wdio/mocha-framework": "^5.16.15",
    "@wdio/sauce-service": "^5.12.1",
    "@wdio/selenium-standalone-service": "5.6.4",
    "@wdio/spec-reporter": "^5.16.11",
    "@wdio/sync": "^5.16.15",
    "babel-cli": "^6.26.0",
    "babel-eslint": "^10.0.2",
    "babel-preset-es2015": "^6.24.1",
    "chromedriver": "^78.0.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^7.0.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-wdio": "^5.12.1",
    "mocha": "^6.2.2",
    "node-fetch": "^2.3.0",
    "rimraf": "^3.0.0",
    "spectron": "^9.0.0",
    "wdio-chromedriver-service": "^5.0.2",
    "webdriverio": "^5.12.4"
  },
  "main": "config.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

wdio.conf.js

exports.config = {
    runner: 'local',
    //
    specs: [
        'test.js'
    ],
    //
    exclude: [
        // 'path/to/excluded/files'
    ],
    //
    //
    capabilities: {
        myChromeBrowser: {
            capabilities: {
                browserName: 'chrome',
            }
        },
        myAppiumApp: {
            port: 4723,
            capabilities: {
                platformName: 'iOS',
                'appium:deviceName': 'iPhone 8',
                'appium:platformVersion': '12.4',
                'appium:orientation': 'PORTRAIT',
                'appium:noReset': true,
                'appium:newCommandTimeout': 240,
                "appium:platformName": "iOS",
                "appium:deviceName": "iPhone 8",
                "appium:bundleId": "com.farfetch.sof.shopfloor.chanel.debug",
            }
        }
    },
    services: ['appium'],
    appium: {
        args: {
            address: '127.0.0.1',
            commandTimeout: '7200',
            sessionOverride: true,
            debugLogSpacing: true,
            platformVersion: '4.4',
            platformName: 'iOS',
            deviceName: 'emulator-5554',
            nativeInstrumentsLib: true,
            isolateSimDevice: true,
            app: "com.abc.debug"
        }
    },
    //
    logLevel: 'trace',
    //
    deprecationWarnings: true,
    //
    bail: 0,
    //
    waitforTimeout: 10000,
    //
    connectionRetryTimeout: 90000,
    //
    connectionRetryCount: 3,
    //
    services: ['selenium-standalone'],
    //
    framework: 'jasmine',
    //
    //
}

和我的测试文件：

import {join} from 'path';

describe('create article', function() {
    it('should do something with two browser', function () {
        //console.log(browser.getTitle()); // returns {myChromeBrowser: 'Google', myFirefoxBrowser: 'Google'}

        //myAppiumApp.$('~Login').click();
        myChromeBrowser.url('http://localhost:9174/')
        myChromeBrowser.setWindowSize(2160, 3840)
        //myChromeBrowser.pause(50000000000000000)
        //console.log(myChromeBrowser.getTitle());
        //myChromeBrowser.pause(50000000000000000)

    });
});

Answer 1

之外使用import语句

为了让Node知道以下脚本必须为transpiled（ES6特有的功能，如您的导入，您必须使用@babel/register。

在WDIO中最常用的方法是在before钩子中注册：

before: function() {
    require('@babel/register')
},

如果使用的是Mocha，那么您可以通过以下方式指定要使用Babel的Node：

mochaOpts: {
  ui: 'bdd',
  compilers: ['js:babel-register']
},

或

mochaOpts: {
    ui: 'bdd',
    require: ['@babel/register']
},

---

现在，您必须编辑NPM脚本以使用@babel/register来对脚本进行午餐。因此，您的scripts变为：

  "scripts": {
    "android.sauce.rdc.app": "node -r babel-register ./config/saucelabs/wdio.android.rdc.app.conf.js",
    "android.app": "node -r babel-register ./config/wdio.android.app.conf.js",
    "android.browser": "node -r babel-register ./config/wdio.android.browser.conf.js",
    "ios.app": "node -r babel-register ./config/wdio.ios.app.conf.js",
    "ios.sauce.rdc.app": "node -r babel-register ./config/saucelabs/wdio.ios.rdc.app.conf.js",
    "ios.browser": "node -r babel-register ./wdio.conf.js",
    "real.browser": "node -r babel-register ./config/wdio.browser.conf.js",
    "lint": "eslint config tests"
  },

！注：从wdio.conf.js文件中进行注册，意味着您将无法在其上使用ES6功能。这是因为require('babel/register')不会从调用文件的位置开始对其进行转换。因此，如果您的wdio.conf.js imports使您的终端尖叫，请不要惊慌。 :)