anonymous default export はやめたほうがいいかもね

anonymous default export?

anonymous default export とは名前のとおり匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。

export default class {
  constructor(options) {
    this.options = options;
  }
}
 
export default function () { }
 
export default 1
 
export default { a: 1 }
 
export default [1, 2, 3]

名前付きエクスポートで名前を省略するとエラーとなります。

// A class declaration without the 'default' modifier must have a name.
export class {
  constructor(options) {
    this.options = options;
  }
}

anonymous default export は自動インポートが効かない

anonymous default export を使うもっとも重大な欠点はエディタによる自動インポートが効かないことです。

たまに「名前付きエクスポート自動インポートでき、デフォルトエクスポートはできない」と思われていますがこれは誤りです。デフォルトエクスポートも名前を付けることで自動インポート可能です。

// login.js
const login = () => {
  console.log("login");
};
 
export default login;

auto import

このようにデフォルトエクスポートに名前を付けることは自動インポートを可能にして開発体験を向上させることができます。副次的な効果として、モジュールのインポート側とエクスポート側とでなるたけ同じ名前を使わせることができます。両者で同じ名前を使うことで、そのモジュールがどこで使われているのか検索（grep）しやすくなります。

ただし、名前付きエクスポートと異なりエクスポート側で関数の名前を変更してもコンパイルエラーを発生させることはできないので、エクスポート側で関数名を強制したいような場合には名前付きエクスポートを使うとよいでしょう。