エクスポートの実験

export default function foo() {
  console.log("hello");
}

次のようにコンパイルされる。

"use strict";
exports.__esModule = true;
function foo() {
    console.log("hello");
}
exports["default"] = foo;

exports["default"] は、mudule.exports.default でも同じ。とにかく、defaultというプロパティ名でセットされる。

次は良くない（僕は嫌いな）構文。

function foo() {
  console.log("hello");
}
export = foo;

"use strict";
function foo() {
    console.log("hello");
}
module.exports = foo;

module.exports 自体に関数がセットされる。

次は好きな構文。

export {foo}
function foo() {
  console.log("hello");
}

"use strict";
exports.__esModule = true;
exports.foo = void 0;
function foo() {
    console.log("hello");
}
exports.foo = foo;

以下でもいい。

export function foo() {
  console.log("hello");
}

"use strict";
exports.__esModule = true;
exports.foo = void 0;
function foo() {
    console.log("hello");
}
exports.foo = foo;

以下の無名関数のエクスポートはコンパイルできない。

export function() {
  console.log("hello");
}

次ならエクスポートはできる。

export default function() {
  console.log("hello");
}

"use strict";
exports.__esModule = true;
function default_1() {
    console.log("hello");
}
exports["default"] = default_1;

default_1 という一時的な名前を付けて、modules.exports.default にセットしている。

export default とうのは、何かを無名でエクスポートしたい。元の名前があっても、その名前は消し去ってエクスポートしたい。名前はインポート側で、あるいは別ななんかのメカニズムで決めて欲しい、ということになる。無名だから元の名前（仮にあっても）の影響を受けないが、同一物が異なる複数の名前で呼ばれる（エイリアシングの）リスクはある。