パーセルを使用してWebアプリをバンドルする

getdocs

2年前

Parcel は、非常に高速で、個別のプラグインを必要とせずに、HTML、CSS、JavaScript、Image、およびTypeScriptアセットをすぐにサポートする新進気鋭のモジュールバンドラーです。何よりも、構成は必要ありません。エントリファイルをポイントするだけで、Parcelがアセットのバンドル、変換、最小化を引き継ぎます。

パーセルがどのように使用されるかを調べてみましょう。

インストール

開始するために必要なのは、parcel-bundlerパッケージだけです。 npmまたはYarnを使用してグローバルにインストールします。

$ npm i -g parcel-bundler

# or, using Yarn:
$ yarn global add parcel-bundler

使用法

まず、新しいnpmプロジェクトを初期化します。

$ npm init

# or, using Yarn
$ yarn init

次に、メインのindex.html、2つのJavaScriptファイルと2つのCSSファイルを含む非常にシンプルなデモアプリを使用して、Parcelの使用法を示します。アプリには、クリックするとページの背景色を変更する2つのボタンがあります。

HTMLファイルの内容は次のとおりです。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Color My World</title>

  <link rel="stylesheet" href="./styles.css">
</head>

<body>

  <div class="controls">
    <button id="color">Color!</button>
    <button id="premium-color">Premium color!</button>
  </div>

  <script src="./index.js"></script>
</body>

</html>

スタイルとスクリプトファイルに使用するパスがどのように相対的であるかに注目してください。これは、パーセルがその魔法を働かせるのに重要です。画像などの他のアセットも、相対パスを使用して参照する必要があります。

エントリのJavaScriptファイルは次のようになります。

index.js

'use strict';

import premiumColors from './premium';
const colorBtn = document.getElementById('color');
const premiumColorBtn = document.getElementById('premium-color');
const availableColors = [
  'aliceblue',
  'blanchedalmond',
  'darkorchid',
  'darkseagreen',
  'khaki',
  'lightblue'
];
colorBtn.addEventListener('click', () => {
  const randIdx = Math.floor(Math.random() * availableColors.length);
  document.documentElement.style.setProperty('--bg', availableColors[randIdx]);
});

ここではES6モジュールを使用していることに気付くでしょうが、ParcelはCommonJS構文も理解しています。 2番目のJavaScriptファイルには、プレミアムカラーを使用したデフォルトのエクスポートが含まれています。

Premium.js

export default [
  'lightcoral',
  'moccasin',
  'cornflowerblue',
  'burlywood',
  'gainsboro',
  'ivory'
];

メインのCSSファイルは、ボタンのスタイルを含む別のスタイルシートをインポートし、body要素と.controlsdivのスタイルルールを定義します。

styles.css

@import './button.css';

body {
  background: var(--bg, paleturquoise);
  height: 100vh;
}

そして最後に、ボタンのスタイルは本当にシンプルです。

button.css

button {
  background: peachpuff;
  font-size: 1.3em;
  border: none;
  padding: .4em;
  margin: .3em;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.13);
}

Parcelは、SASS、LESS、Stylusもすぐにサポートします。

シンプルなアプリの準備ができたら、小包を呼び出してindex.htmlエントリファイルを指定できます。

$ parcel index.html

Parcelは、/distフォルダーにさまざまなバンドルを生成し、http://localhost:1234/でローカルサーバーを起動し、変更のリッスンを開始します。

--out-dirフラグを使用して、別の出力フォルダーを指定することもできます。

$ parcel index.html --out-dir public

Parcelには、変更をバンドルしてリッスンするwatchコマンドもありますが、ローカルサーバーを起動する必要はありません。

$ parcel watch index.html

アプリを本番環境に移行する準備ができたら、buildコマンドを使用して本番環境ビルドをバンドルできます。

$ parcel build index.html

これにより、Parcelのホットモジュール置換がオフになり、JavaScript、CSS、およびHTMLアセットが最小化されます（UglifyJS、cssnano、およびhtmlnanoを使用）。

BabelとPostCSS

バンドルに加えて、Parcelは、そのままで、Babel、 PostCSS 、およびPostHTMLを使用してコード変換を実行できます。

必要な依存関係を追加し、プロジェクトのルートにそれぞれの構成ファイルを含めるだけで、残りはParcelが処理します。

たとえば、PostCSSの autoprefixer を使用してベンダープレフィックスを自動的に追加する場合は、最初にパッケージをインストールします。

$ npm install autoprefixer

# or, using Yarn:
$ yarn add autoprefixer

次に、.postcssrcファイルをプロジェクトのルートに追加します。

.postcssrc

{
  "plugins": {
    "autoprefixer": true
  }
}

以上です！今このCSS：

.controls {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: 100%;
}

これに変換されます：

.controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

プロジェクトに.browserslistrcファイルを追加することにより、Browserlistを使用してターゲットとするブラウザーを指定することもできます。

TypeScript

Parcelは、そのままTypeScriptをサポートします。プロジェクトへの開発依存関係としてtypescriptを追加するだけです。

$ npm i typescript --save-dev

# or, using Yarn:
$ yarn add typescript --dev

次に、tsconfig.jsonファイルをプロジェクトに追加します。例えば：

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

これで、インデックスファイルがTypeScriptエントリファイルを直接指すことができ、通常どおりparcelを呼び出すと、TypeScriptコードが自動的にJSコードに変換されます。

index.html

...
<script src="./index.ts"></script>
...

$ parcel index.html

新しいTypeScriptプロジェクトの構成に関する詳細については、この投稿を確認してください。
parcel-plugin-typescript と呼ばれるParcel用のサードパーティのTypeScriptプラグインもあり、ビルド時にタイプチェックとエラーレポートを利用できます。

📦これで、Parcelのゼロ構成の使いやすさと高速バンドル生成でレースに出かけることができます！詳細については、公式ドキュメントを参照してください。