CommonJSとECMAScript
JavaScriptにはサーバサイドのNodeJS(CommonJS)とブラウザのJavaScript(ECMAScript)の二つの言語仕様がある．
二つはモジュール機能（JavaScriptファイルを外部参照する機能）の記述に関して大きな違いがある．
CommonJSのモジュール機能
CommonJSでモジュールを外部参照できるようにするためには，主にmodule.exportsを使う．
module.exports = 変数１， 変数２， ．．．
CommonJSでモジュールを参照するためには，requireを使う．
requireで参照するモジュールのファイル名を指定することで，module.exportsした変数そのものを参照することができる．
const abc = require('abc')
ECMAScriptのモジュール機能
ECMAScriptでモジュールを外部参照できるようにするには，主にexportもしくはexport defaultを使う．
export 変数
export default 変数
ECMAScriptでモジュール参照するためには，importを使う．
※import分はトッブレベルでないと使えない（ブロック中では使用不可）．
import { 変数 } from 'abc' //export変数を参照する場合
import abc from 'abc' //export default を参照する場合
CommonJSでもimport/exportが使用可能に
package.jsonに"type":"module"の設定を追加することでimport/exportが使用可能．
babel
フロントエンドの実装には，ブラウザ間でHTML，CSS,JSの実装レベルが異なるという大きな問題がある．
この問題に関して新しいJS文法を古いJS文法に変換して古いブラウザでも使えるようにするためのツールがbabelである．
babelの役割は非常に多く，様々なことが実現可能である．
- 新しいJS文法から古いJS文法への変換
- NodeJSでECMAScriptのimport/exportの実装
- ReactなどのJSX文法の変換
- TSからJSへの変換
babelの設定ファイル
.babelrc, babel.config.js,babel.config.cjs,babel.config.jsonのいずれかの設定ファイルに設定を書くか
webpackの場合，babel-loaderプラグインのoptionsに指定する方法が存在．
webpack
webpackは，JavaScriptアプリケーション用の静的モジュールバンドルである．
webpackがアプリケーションを処理するとき，プロジェクトが必要とする全てのモジュールをマップし，１つ以上のバンドルを生成する依存関係グラフを内部で構築する