【ITニュース解説】Dual publish ESM and CJS with tsdown

この記事は、TypeScriptで書かれたプロジェクトを公開する際に、ESM（ECMAScript Modules）とCJS（CommonJS）という2つの異なるモジュール形式に対応する方法を解説している。特に、tsdownというツールを使って、その設定や手順を具体的に説明している。システムエンジニアを目指す初心者に向けて、この記事の内容を詳しく見ていこう。

まず、なぜESMとCJSの両方に対応する必要があるのか。それは、JavaScriptのエコシステムが進化し、新しい環境ではESMが推奨される一方、古い環境や一部のライブラリではCJSが依然として使われているからだ。両方に対応することで、より多くの環境で自分のライブラリやツールを使ってもらえるようになる。

tsdownは、TypeScriptのコードをESMとCJSの両方の形式に変換するためのツールだ。記事では、まずtsdownをインストールする方法から説明している。コマンドラインでpnpm i -D tsdownを実行することで、プロジェクトにtsdownを開発用の依存関係として追加できる。pnpmはNode.jsのパッケージマネージャーの一つで、npmやyarnと似た役割を果たす。

次に、tsdown.config.tsという設定ファイルを作成する。このファイルで、tsdownがどのようにコードを変換するかを設定する。記事の例では、entryで変換するTypeScriptファイルの場所（src/index.ts）を指定し、formatで出力するモジュールの形式（esmとcjs）を指定している。dts: trueは、TypeScriptの型定義ファイル（.d.ts）も生成することを意味する。sourcemap: trueは、ソースマップを生成することで、デバッグを容易にする。clean: trueは、出力先のディレクトリを毎回クリアすることを意味し、outDir: "dist"は、出力先のディレクトリをdistに設定している。

設定ファイルが完了したら、package.jsonファイルの設定も重要だ。package.jsonは、プロジェクトに関する情報が書かれたファイルで、依存関係やスクリプトなどを定義する。記事では、files、main、module、types、exportsというフィールドを設定する必要があると述べている。

filesフィールドは、npmに公開する際に含めるファイルを指定する。ここでは、distディレクトリを指定することで、変換されたESMとCJSのファイル、そして型定義ファイルが公開されるようにする。

mainフィールドは、CJS形式のエントリーポイントを指定する。ここでは、./dist/index.cjsを指定している。

moduleフィールドは、ESM形式のエントリーポイントを指定する。ここでは、./dist/index.jsを指定している。

typesフィールドは、型定義ファイルのエントリーポイントを指定する。ここでは、./dist/index.d.tsを指定している。

exportsフィールドは、より詳細なモジュールのエクスポート方法を指定する。importとrequireという条件で、それぞれESMとCJSに対する型定義ファイルとJavaScriptファイルを指定している。これにより、ESMをサポートする環境ではESM形式のファイルが、CJSをサポートする環境ではCJS形式のファイルが自動的に選択されるようになる。

最後に、@arethetypeswrong/cliというツールを使って、型定義が正しく設定されているかを確認する。このツールを使うことで、さまざまな環境で型が正しく解決されるかをテストできる。コマンドラインでnpx -y @arethetypeswrong/cli --pack .を実行することで、現在のパッケージをnpmパッケージとしてパッケージングし、そのパッケージに対して型チェックを行う。結果として、Node.jsの異なるバージョン（例えばnode10やnode16）や、バンドラー（webpackやRollupなど）で型が正しく解決されるかを確認できる。

もし全ての設定が正しければ、No problems found 🌟というメッセージが表示される。これにより、ESMとCJSの両方に対応したライブラリを自信を持って公開できる。

この記事で紹介されている手順と設定は、TypeScriptで書かれたライブラリやツールを開発し、公開する際に非常に役立つ。特に、モジュールの形式や型定義の設定は、初心者にとっては難しい部分だが、tsdownを使うことで、比較的簡単に両方の形式に対応できる。