0

【モダンJavaScript #7】モジュールの基礎を理解しよう!名前空間(スコープ)の問題とはおさらば!【フロントエンドエンジニア講座】 - YouTube
を見てモジュールの形式が2つあることがわりました。

下記のNextJSのドキュメントに

https://nextjs.org/learn/basics/assets-metadata-css/layout-component

export default function Layout({ children }) {
  return <div>{children}</div>
}

import Link from 'next/link'
import Layout from '../../components/layout'

export default function FirstPost() {
...

等ありますが、CommonJS形式, ES Modules形式どちらの形式なのでしょうか?

見た目で(import文やexport文の書き方で)判断つくものなのでしょうか?

1 件の回答 1

2

importexport の記法自体は、 ESM モジュール方式の記法です。

ただ、それが実際に実行される際にその形式が利用されているかというと違う場合が多く、 NextJS のようなフロントエンドフレームワークの場合、そのコードは実際に実行ないし配布される場合には、 babel や webpack により処理されるのが普通です。

そして babel には、特定のモジュール記法のコードを別のモジュール記法に変換する機能があります。なので、裏でどうなっているかはあまり意識されないことが多いかと思います。

まとめますと、

  • import / export の記法は ESM のモジュール方式の記法です。
  • ただ実際に ESM モジュールで実行されているかというと、そうとは限りません。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。