不切换TypeScript如何修复import/no-default-export报错

问题场景 #

将页面选择器统一抽离到独立JS文件维护时，最初采用默认导出的写法：

// Home-page-selectors.js
export default {
  headerLinks: 'header a',
  contactUsLink: "header a[href='/contact-us']",
}

在页面对应文件中按如下方式导入使用：

// Home-page.js
import selectors from '../test-data/home-page-data.js'

// 调用示例
cy.get(selectors.headerLinks)

运行lint任务时抛出如下错误：

error Prefer named exports import/no-default-export

由于项目内部分插件存在兼容性限制，无法切换到TypeScript技术栈，需在纯JS环境下解决该问题。

修复方案 #

方案1：遵循lint规则改用命名导出（推荐） #

完全符合规则校验要求，不影响原有选择器调用逻辑，仅需调整两处语法：

• 修改选择器文件，将默认导出改为命名导出

// Home-page-selectors.js
export const selectors = {
  headerLinks: 'header a',
  contactUsLink: "header a[href='/contact-us']",
}

• 修改对应文件的导入语句，使用命名导入写法

// Home-page.js
import { selectors } from '../test-data/home-page-data.js'

修改完成后，原有cy.get(selectors.headerLinks)这类调用代码无需任何改动，可直接正常运行。

方案2：针对单文件关闭对应lint规则（无侵入调整） #

如果不想改动现有导入导出的代码逻辑，可直接在抛出错误的文件顶部添加eslint忽略注释，跳过该规则的校验：

/* eslint-disable import/no-default-export */
// Home-page-selectors.js
export default {
  headerLinks: 'header a',
  contactUsLink: "header a[href='/contact-us']",
}

添加注释后不需要调整其他任何业务代码，lint任务运行时不会再对该文件的默认导出行为抛出错误。

内容的提问来源于stack exchange，提问作者Doctor Who