Parcelを使ったウェブアプリの構築

インストール

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

yarn add --dev parcel

または、npmを使う場合は以下を実行します。

npm install --save-dev parcel

プロジェクトの設定

Parcelがインストールされたので、アプリのソースファイルを作成しましょう。Parcelはあらゆる種類のファイルをエントリポイントとして受け入れますが、HTMLファイルから始めるのが良いでしょう。Parcelはそこからすべての依存関係を辿ってアプリをビルドします。

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Parcelには開発サーバーが組み込まれており、変更を加えるとアプリが自動的に再構築されます。起動するには、エントリファイルを指定してparcel CLIを実行します。

yarn parcel src/index.html

または、npmを使う場合は以下を実行します。

npx parcel src/index.html

ブラウザでhttp://localhost:1234/を開くと、上記で作成したHTMLファイルが表示されます。

次に、JavaScriptやCSSファイルなど、HTMLファイルに依存関係を追加することができます。例えば、styles.cssファイルを作成し、<link>タグを使ってindex.htmlファイルから参照したり、<script>タグを使って参照されるapp.jsファイルを作成したりすることができます。

src/styles.css

h1 {
  color: hotpink;
  font-family: cursive;
}

src/app.js

console.log('Hello world!');

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

変更を加えると、ページをリフレッシュしなくても、ブラウザでアプリが自動的に更新されるはずです。

この例では、バニラHTML、CSS、JavaScriptの使用方法を紹介しましたが、ParcelはReactやTypeScriptなど、多くの一般的なウェブフレームワークや言語にも対応しています。レシピや言語のセクションで詳細をご覧ください。

パッケージスクリプト

これまではparcel CLIを直接実行していましたが、package.jsonファイルにスクリプトを作成すると便利です。また、parcel buildコマンドを使って本番環境用にアプリをビルドするスクリプトも設定します。最後に、sourceフィールドを使ってエントリを1か所で宣言することもできるので、各parcelコマンドで重複させる必要がありません。

package.json

{
  "name": "my-project",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

これで、yarn buildを実行して本番環境用にプロジェクトをビルドし、yarn startを実行して開発サーバーを起動することができます。

ブラウザターゲットの宣言

デフォルトでは、Parcelはコードのトランスパイルを実行しません。つまり、最新の言語機能を使ってコードを書くと、Parcelはそれをそのまま出力します。アプリがサポートするブラウザは、browserslistフィールドを使って宣言できます。このフィールドが宣言されている場合、Parcelはサポートされているブラウザとの互換性を確保するために、コードをそれに応じてトランスパイルします。

package.json

{
  "name": "my-project",
  "source": "src/index.html",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

ターゲットの詳細、およびParcelの差分バンドル自動サポートについては、ターゲットページをご覧ください。

次のステップ

プロジェクトの設定が完了したので、Parcelのより高度な機能について学ぶことができます。開発と本番環境に関するドキュメントを参照し、一般的なウェブフレームワークやツールを使った詳細なガイドについては、レシピと言語のセクションをご覧ください。