Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ESM移行は無理だけどおれもSindreのライブラリが使いたい!

 ESM移行は無理だけどおれもSindreのライブラリが使いたい!

依存しているライブラリが ESM only になってしまうことがあると思います。
そんなとき、自分たちが CommonJS だと素直に使えなくて困りますよね。
そこで、なんとかしてCommonJS環境から ESM only のパッケージをrequireする方法をご紹介します。推奨はしません。

sosukesuzuki

August 03, 2022
Tweet

More Decks by sosukesuzuki

Other Decks in Programming

Transcript

  1. About me • @__sosukesuzuki • Ubie ( ユビー ) •

    Prettier • Babel • 筑波大学 (B3?B4)
  2. 前提 • Prettierの話です ◦ CommonJS で書かれてる ◦ Node.js でソースコードをそのまま実行できる必要がある ◦

    配布するときはガッツリバンドルする • この方法を推奨するものではありません
  3. 少なくともSindre SorhusはESM時代に突入! • 多くのNode.js用ライブラリの作者・メンテナーとして知られる Sindre SorhusはESMを強く推している ◦ ky, got, execa,

    tempy, chalk, type-fest, mem, etc… ◦ 自身のライブラリを続々と ESMへ移行したり、そのためのガイドを書いたりしている • ESMのみをサポートするライブラリを使うためには、基本的には使う側も ESMに移行する必要がある • 彼のライブラリに依存せずに自分のライブラリをメンテナンスするのはなかなか難しい • 多くのライブラリメンテナーも (自動的に)ESM時代に片足突っ込んでしまった! • ちなみに、unified とか remark の作者の wooorm も ESM 派
  4. すぐにESM移行をするのはキツイ! • ECMAScript Modulesに移行することはややめんどい ◦ 全部書き換える必要がある、コードがでかいとめんどい ◦ dynamic require をそのまま

    dynamic import に置き換えることはできない (Promise) ◦ パッケージの配布方法やビルドスクリプトを変更する必要があるかもしれない ◦ 短期的なメリットはほとんどない ▪ 別にCommonJSでも動く ▪ Sindre のライブラリが使えなくても死なない • メジャーアップデートをする必要がある ◦ 色々予定や覚悟がね ...
  5. ESMパッケージをCommonJSにする • あらかじめESMパッケージのリストを用意しておく ◦ https://github.com/prettier/prettier/blob/main/scripts/vendors/vendors.mjs ◦ const vendors = [“chalk”,

    /* その他 */, “tempy”]; • vendorsを全部esbuildでCJSに変換する! ◦ esbuild速すぎる ◦ require.resolve(vendor)を entry point にしてCommonJSファイルへとバンドルする • ./vensors にCJSファイルを置く ◦ ついでの型定義ファイルも (存在すれば)いい感じに生成しておく • (ライセンス情報を残しておく )
  6. ESMパッケージをCommonJSにする • depandabotとかで勝手にpackage.jsonのバージョンが更新されると node_modulesとvendorsでバージョ ンの整合性がとれないことがある • そういのはGitHub Actionsではじいてる ◦ -

    run: yarn run vendors:bundle && echo "Listing changed files:" && git diff --name-only --exit-code && echo "No files changed." • GitHub Actionsが落ちたら、メンテナーの手作業で yarn verndors:bundle の結果を追 push する
  7. この方法のダメな点 • 謎のレイヤーが挟まってデバッグしにくい • 謎のレイヤー自体のメンテコストがある • ESMパッケージを全部CJSにバンドルしてしまうのでTree Shakingとかない ◦ https://sosukesuzuki.dev/posts/how-to-reduce-prettier-size/

    で紹介したような手作業 Tree Shakingでサイズを 落とすしかない • 標準の仕組みに乗っかれないのは嫌な気持ちになる • ビルド職人みたいな人がいないと厳しそう
  8. やめよう!! • Prettier v3 ではコードベースのECMAScript Modules移行が行われるのでこの仕組みともおさらばでき る ◦ prettier/prettier/package.json の

    type は module ◦ prettier/prettier/dist/package.json の type は commonjs • うれしいね • 2022年9月にリリースしたい気持ちでいっぱいです