Parcelでライブラリを構築する

インストール

始める前に、NodeとYarnまたはnpmをインストールし、プロジェクト用のディレクトリを作成する必要があります。次に、Yarnを使用してParcelをインストールします。

yarn add --dev parcel

または、npm runを使用する場合は

npm install --save-dev parcel

プロジェクトの設定

Parcelがインストールされたので、ライブラリ用のpackage.jsonファイルをセットアップしましょう。 sourceフィールドを使用してソースファイルを参照し、ビルドの出力ファイルとしてmainターゲットを作成します。これは、ライブラリを使用する他のツール（バンドラーやNode.jsなど）によって使用されます。

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "devDependencies": {
    "parcel": "latest"
  }
}

上記の例では、ライブラリのソースコードとしてsrc/index.jsを使用しているため、次にそのファイルを作成しましょう。この例では、JavaScriptファイルを使用していますが、TypeScriptファイルや、ここでJavaScriptにコンパイルされる他の言語を参照することもできます。

export function add(a, b) {
  return a + b;
}

これで、ライブラリはaddという単一の関数をエクスポートします。この関数は2つのパラメーターを加算し、結果を返します。これはexportキーワードを使用してESモジュール構文で記述されているため、Parcelはmainフィールドでデフォルトで期待されるように、コードをCommonJSモジュールにコンパイルします。

ライブラリをビルドするには、プロジェクトディレクトリ内でnpx parcel buildを実行します。 Parcelは、ソースコードをビルドし、mainフィールドで参照されているように、dist/main.jsにJavaScriptファイルを出力します。

パッケージスクリプト

これまで、parcel CLIを直接実行していましたが、これを簡単にするためにpackage.jsonファイルにいくつかのスクリプトを作成すると便利です。また、開発中に変更を加える際にbuildスクリプトを手動で実行する必要がないように、ソースファイルの変更を監視し、自動的に再構築するwatchスクリプトもセットアップします。

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

これで、yarn buildを実行してリリース用にプロジェクトをビルドし、開発ではyarn watchを実行できます。

CommonJSとESモジュール

Parcelは、CommonJSとESモジュールの両方を入力として受け入れ、package.jsonで宣言されている内容に応じて、これらの形式の1つ以上を出力できます。 ESモジュールターゲットを追加するには、package.jsonにmoduleフィールドを追加します。

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "devDependencies": {
    "parcel": "latest"
  }
}

これで、Parcelはdist/main.jsをCommonJSモジュールとして、dist/module.jsをESモジュールとして出力します。ライブラリを使用するツールは、これらの中でサポートしている方を選択します。

ファイル拡張子を使用して、出力するモジュールのタイプを示すこともできます。 .mjs拡張子はESモジュールを生成し、.cjs拡張子はCommonJSモジュールを生成します。これは、mainフィールドのデフォルトの動作をオーバーライドします。 "type": "module"フィールドをpackage.jsonで設定して、mainフィールドをESモジュールとして扱うこともできます。詳細については、Node.jsドキュメントを参照してください。

TypeScript

Parcelは、TypeScriptで記述されたライブラリのビルドもサポートしています。 sourceフィールドは、エントリの.tsまたは.tsxファイルを指すことができ、ParcelはJavaScriptをターゲットに自動的に出力します。 package.jsonのtypesフィールドを使用して.d.tsファイルを指すこともでき、ParcelはコンパイルされたJavaScriptとともに型定義ファイルを生成します。これにより、VSCodeのようなエディターは、ライブラリのユーザーにオートコンプリートを提供できます。

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.ts",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "devDependencies": {
    "parcel": "latest"
  }
}

これで、Parcelは、コンパイルされたコードに加えて、ライブラリの型定義を含むdist/types.d.tsファイルを出力します。

次のステップ

これでプロジェクトが設定されたので、Parcelのより高度な機能について学ぶ準備ができました。 ターゲットに関するドキュメントを確認し、人気のあるWebフレームワークとツールを使用したより詳細なガイドについては、「レシピ」と「言語」のセクションを参照してください。