如何解决 ESLint 错误：'export default' is not allowed

如何解决 ESLint 错误：'export default' is not allowed

当我们在编写 JavaScript 代码时，有时候会遇到一些 ESLint 的错误提示，其中常见的一个就是 'export default' is not allowed。这个错误提示通常出现在我们使用了 export default 进行模块导出时。那么，如何解决这个错误呢？

什么是 export default？

在 ECMAScript 6 中，我们可以使用 export 语法将一个模块导出来，供其他模块使用。而在 export 语法中，有两种导出方式，分别是命名导出和默认导出。

命名导出就是使用 export + 变量名的方式，将变量导出来：

export const name = '小明';
export const age = 18;

而默认导出则是使用 export default语法，将一个默认导出的变量导出来：

const name = '小明';
const age = 18;
// 默认导出
export default {
  name,
  age
};

使用 export default 进行导出，就可以在其他模块使用时，直接引用默认导出的变量，而不用在调用时写上变量名。

为什么会出现 'export default' is not allowed 错误？

弹窗告诉我们：“'export default' is not allowed”，也就是说，我们在代码中使用了“export default”的语法，而 ESLint 规则中不允许这么写导出模块。这个错误通常出现在使用 Babel 进行代码转换时，因为默认情况下 Babel 会在代码中添加严格模式的指令，所以会抛出该错误。

如何解决 'export default' is not allowed 错误？

在使用 export default 语法时，我们需要在 ESLint 配置文件中添加 "rules" 配置来解决该错误。具体的做法是：

// .eslintrc.js
module.exports = {
  rules: {
    'import/no-default-export': 'error'
  }
};

在 rules 中添加 'import/no-default-export' 配置项，将其设为 'error' 级别，这样就能解决该错误了。

示例代码

完整的解决 'export default' is not allowed 错误的示例代码如下：

// index.js
const name = '小明';
const age = 18;

export default {
  name,
  age
};

// .eslintrc.js
module.exports = {
  rules: {
    'import/no-default-export': 'error'
  }
};

此时，使用 Babel 进行编译时，就不会抛出 "'export default' is not allowed" 的错误提示了。

总结

在使用 export default 语法进行模块导出时，ESLint 可能会报错，提示 "'export default' is not allowed"。这个错误出现的原因是，ESLint 规则中不允许使用默认导出语法。为了解决这个问题，我们需要在 ESLint 配置文件中添加对应的配置。通过本文的介绍与示例代码，相信大家对于如何解决这个问题有了更加深入的了解。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed1924f6b2d6eab3743f29