export defaultした関数名が別の名前で import されているのはなぜですか

Question

ワードプレスでカスタムブロックを作ってみたくて、githubに公開されているコードを見ているのですが、

下記のファイルでexportされたAlertEditという関数が
https://github.com/vektor-inc/vk-blocks/blob/master/src/blocks/alert/edit.js

こちらのファイルにimportされていると思うのですが、
https://github.com/vektor-inc/vk-blocks/blob/master/src/blocks/alert/index.js

edit.jsでは export default function AlertEdit(...) のようにexportしているにもかかわらず
index.jsでは import edit from './edit' となっています。

なぜ import AlertEdit from './edit' ではなく
import edit from './edit' となっているのですか？
そしてなぜimportできてしまうのでしょうか？

Answer 1

export | MDN

に記載の通りです。
defaultでexportした場合、
importした側では、好きな名前で、defaultのものを使うことができます。
今回は、
AlertEditを、editという名前で使用する、としているわけですね。

Comments

[acbma]

理解しました。ありがとうございます！

Answer 2

もともと require 構文だということを把握すれば代入先に命名しても問題ないことがイメージしやすいと思います。

import Named from './edit'
const Named = require("./edit")

import { hoge: named } from './edit'
const named = require("./edit").hoge
const { hoge: named } = require("./edit")