Node.js における ES Modules を理解する
console.log()でtypeof moduleするとCommonJSだとobject、ESModuleだとundefinedになる.cjs= CommonJS,.mjs= ESModule,.jsの場合はpackage.jsonのtypeの値による。デフォルトはcommonjs。- importのとき、基本的に拡張子は省略できないが、特定のフラグをつけると省略可能になる。そのフラグをつけているとディレクトリまでを指定したら勝手にindex.(m)jsを読むという挙動もONになる。
- ESModuleからCommonJSを読む時、CommonJSから読み込むものは全てdefaultでラップされるので、名前付きimportはできない(標準モジュールを除く)
- CommonJSでESModuleを読み込む時はrequireもimportも使えないのでDynamic importを使う
- ESMでCMSを読みたいときは結構あるけど、逆ってどのくらいあるんだろう
Differential Serving の実装に module-nomodule pattern を使うべきではない
- Differential Servingするには、(a.)ブラウザがES2015+を扱えるか判定し、(b.)それに応じたバンドルを配信する必要がある
Module-nomodule patternはESModuleをサポートしているかどうかとES2015+を扱えるかどうかは大体同じ結果になるということを利用して、<script type="module">と<script nomodule>でこれを解決する- ただしこれをするとターゲットブラウザ＝babel-compat-dataで定義されているブラウザになり、この下限のバージョンは今後更新されないので古いバージョンをずっとサポートしなければいけなくなる
- ということで他に2つ方法がある
- 1つはFeature Detection。ES2015の構文を実行してブラウザがエラーを出すかで判定するもの。欠点としては、browserslistなどを使ってバンドルをビルドし分けているのに大して順序が逆になるという点が挙げられる。
- もう1つはUser-Agent Sniffing。愚直にUserAgentをみて決める。
Introducing Rome
- LinterでありBuilderでありCompilerでありTest Runnerでもある…というようにWebpackやJestなどの全てのフロント周辺ツールを一手に引き受けることを目指しているらしい
