独自TypeScript Library公開へ向けてtsupをチェケラッチョ

興味があるけど、tsupを聞いたことがない人のために、私たちはこのモダンで堅牢なJavaScriptツールについて説明します。tsupは、人気のあるrollupの代替となる新しいバンドルツールで、JavaScriptライブラリを作成し、他の人が自分のプロジェクトにnpm installできるように、npmレジストリに提出する方法を説明します。この記事は、JavaScriptの拡張機能であるTypeScriptに焦点を当てています。

tsupは、キャッシュを必要とせずに極めて高速な現代のJavaScriptバンドラであるesbuildによって支えられています。このツールは、構成なしでTypeScriptライブラリをバンドルすることができます。このツールは、node.jsプラットフォームが内部的にサポートする任意のファイルをバンドルすることができます。具体的には、.js、.json、.mjs、.ts、.tsxがサポートされており、この時点で実験的に.cssもサポートされています。

yarn add -D tsup

ライブラリのエントリーポイントになるsrc/index.tsを作成します。tsupにこれらのファイルを消費し、どこかに出力するよう指示する必要があります（出力ディレクトリを./distに設定します）。

package.jsonを変更し、スクリプトのプロパティの下にビルドとスタートの行を追加します。

"build": "tsup src/index.ts",

これで、npm run buildを実行すると、tsupコンパイラがsrc/index.tsを消費し、自動的にファイルを./distディレクトリにコンパイルします。

デフォルトでは、tsupは出力ファイルを./distに送信しますが、まもなく説明する設定ファイルで構成することもできます。

./dist/index.jsで生成されたファイルを見ると、空のコンテンツが表示されます。これは、まだライブラリのためのコードを書いていないためです。

より詳細に出力を分析するために、基本的なコードを入力しましょう。

再度、yarn buildを実行し、tsupが私たちのコードをES5にトランスパイルしたことに注目してください。

tsupでは、自動的に使用される設定ファイルを作成して、多くのことができます。以下の内容を持つtsup.config.tsファイルを作成してください。

import type { Options } from 'tsup'

const config: Options = {
  //
}

export default config

この設定ファイルを使用すると、tsupコンパイラに異なる動作を指示できます。

たとえば、dtsをtrueに設定して、TypeScript宣言ファイルを生成するように指示できます。

この設定を使用するには、プロジェクトにtypescriptをインストールする必要があります。そうしないと、エラーが発生します。

yarn add -D typescript

再度npm run buildを実行すると、宣言タイプを含む追加のファイルが生成されます。

デバッグ時により正確なスタックトレースを生成するために、ソースマップを生成することもできます。

構成を 1 行更新するだけで、これら 3 つの形式すべてを生成するように tsup を簡単に構成できます。

const config: Options = {
  entry: ['src/index.ts'],
  dts: true,
  sourcemap: true,
  format: ['iife', 'cjs', 'esm'],
}

"iife" (Immediately Invoked Function Expression)：この形式は、JavaScriptをブラウザ環境で直接実行できるようにするために使用されます。"iife"フォーマットでは、グローバルオブジェクト(windowオブジェクト)にライブラリを公開します。

"cjs" (CommonJS)：この形式は、Node.jsで使用される形式です。CommonJS形式は、モジュールを定義する方法に関する標準を提供します。CommonJSフォーマットでは、モジュールがexportsオブジェクトに公開されます。

"esm" (ECMAScript Modules)：この形式は、ES6(またはそれ以降)で導入された標準的なJavaScriptモジュール形式です。"esm"フォーマットでは、import/exportを使用してモジュールが定義されます。

これらのフォーマットを指定することで、ライブラリを使用するための最適な形式を提供できます。たとえば、Node.jsで使用する場合は、CommonJSフォーマットが必要ですが、ブラウザで使用する場合は、"iife"フォーマットが必要です。"esm"フォーマットは、最新のブラウザで使用することができ、Tree Shaking による効率的なバンドルを実現することができます。

消費者が自分のプロジェクトで使用するフォーマットに対応するファイルをインポートできるようにするには、package.jsonを編集して、特定のフォーマットに対応する正しいファイルを指す必要があります。

exports について詳しく読みたい場合は、公式の Node.js ドキュメントを参照してください。それはこの記事の範囲外です。

以上で、最小限のモダンな JavaScript/TypeScript ライブラリを作成するための推奨要件をカバーしました！次に行う必要があるのは、パッケージを npm レジストリに公開して、ユーザーがパッケージを npm install できるようにすることです。

これを行うには、package.json に publishConfig キーを追加し、その内部に access を "public" に設定してください。