Javascript - 无法在模块外部使用 import 语句

Question

所以我在从一个类导入到另一个类时遇到了重大问题，而我所做的是在我称之为的“主”类中

detailsPage.js

import { DetailsPage } from '../tests/detailsPageObj';

const utils = require("../utils/utils");
const assert = require('../node_modules/chai').assert;
const userData = require('../globalContent.json');

describe('Details page', function () {
    const detailsPage = new DetailsPage();

    // The details page is accessible by the specified URL
    it(`Is defined by the URL: ${userData.url}`, async function () {
        await detailsPage.navigate();
    });

    // Details page has a form and it can be filled out with user data
    it('Has a form that can receive user data', async function () {
        await detailsPage.fillFormWithUserData(); // If you want, make the user data passable to the method
        await utils.click(detailsPage.form.buttons.nextStep);
    });

    if (detailsPage.hasStockConflict) {
        // Details page allows the user to fix conflicts in stocks
        it('Enables resolution of stock conflicts', async function () {
            // Wait for stock to fully load
            await browser.sleep(2000);
            await detailsPage.clickAllRemoveButtons();
            await detailsPage.clickAllDecreaseButtons();
        });
    }

    // Details page allows the user to proceed to the next stage when all conflicts (if any) has been resolved
    it('Allows the user to proceed to the next stage of purchasing', async function () {
        const nextStepButton = detailsPage.form.buttons.nextStep;
        await utils.elementToBeClickable(nextStepButton);
        await utils.click(nextStepButton);
    });
});

我想要做的是从另一个脚本获取DetailsPage，该脚本称为:

detailsPageObj

import { element, by } from 'protractor';

const utils = require("../utils/utils");
const userData = require('../globalContent.json');

export class DetailsPage {
    get pageUtils() {
        return {
            qtyRegex: /^Sorry.*?(\d+)/
        }
    }

    private get fields() {
        return {
            email: element(by.id('email')),
            firstName: element(by.id('firstName')),
            lastName: element(by.id('lastName')),
            postalCode: element(by.id('postalCode')),
            addressOne: element(by.id('addressOne')),
            addressTwo: element(by.id('addressTwo')),
            phone: element(by.id('phone')),
            businessCustomerCB: element(by.id('isBusinessCustomer')),
            company: element(by.id('company')),
            GST: element(by.id('gst')),
        }
    }

    private get groups() {
        return {
            address: element(by.css('div#addressGroup.input-container.showHiddenGroup'));
            company: element(by.id('companyGroup')),
        }
    }

    private get modals() {
        return {
            contactModalLink: element(by.id('contactModalLink')),
            cross: element(by.className('modal-cross')),
        }
    }

    private get formButtons() {
        return {
            nextStep: element(by.id('submitIdentityFormButton')),
            mobile: this.mobileFormButtons
        }
    }

    private get mobileFormButtons() {
        return {
            continue: element(by.id('stock-conflict-continue-button')),
            removeOutOfStockItems: element(by.css('button[id="removeOutOfStockItems"]')), // I just assumed that this is a part of the form
        }
    }

    private get productFrameMobileButtons() {
        return {
            stockControll: element.all(by.className('stock-controller mobile')),
            remove: element.all(by.className('btn btn-remove btn-outlined mobile')),
        }
    }

    private get productFrameDesktopButtons() {
        return {
            stockControll: element.all(by.className('stock-controller desktop')),
            remove: element.all(by.className('btn btn-remove btn-outlined desktop')),
        }
    }

    get form() {
        return {
            fields: this.fields,
            groups: this.groups,
            buttons: this.formButtons,
            modals: this.modals
        }
    }

    get productFrame() {
        return {
            buttons: {
                decrease: element.all(by.className("btn left")).first(),
                mobile: this.productFrameMobileButtons,
                desktop: this.productFrameDesktopButtons
            }
        }
    }

    get errors() {
        return {
            stockConflict: element(by.className('generic-error-heading')),
        }
    }
}

我想做的是在detailsPage.js中尝试导入detailsPageObj.js，但每当我尝试这样做时，我都会得到SyntaxError:无法在模块外使用导入语句。

我做错了什么

Answer 1

我不知道你的环境是什么样的，但我遇到了类似的问题，我的环境使用完整的构建步骤来从我的源(例如从 TypeScript 或从 ES6+)创建目标 JS 代码到捆绑/纯文本JS。

但是我的测试环境没有任何构建步骤。因此，当我执行测试时，它只理解纯 JS，默认情况下，在 Node.js 环境中不能识别 import，而只能识别 require。

您可以在 Node.js 代码中使用 import 而无需构建步骤，但您需要遵循一些步骤，例如将文件从 *.js 重命名为 *.mjs。更多详情here .