パーセルを使用してWebアプリをバンドルする
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ファイルの内容は次のとおりです。
<!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ファイルは次のようになります。
'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ファイルには、プレミアムカラーを使用したデフォルトのエクスポートが含まれています。
export default [
'lightcoral',
'moccasin',
'cornflowerblue',
'burlywood',
'gainsboro',
'ivory'
];
メインのCSSファイルは、ボタンのスタイルを含む別のスタイルシートをインポートし、body要素と.controlsdivのスタイルルールを定義します。
@import './button.css';
body {
background: var(--bg, paleturquoise);
height: 100vh;
}
そして最後に、ボタンのスタイルは本当にシンプルです。
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
ファイルをプロジェクトのルートに追加します。
{
"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
ファイルをプロジェクトに追加します。 例えば:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
}
}
これで、インデックスファイルがTypeScriptエントリファイルを直接指すことができ、通常どおりparcel
を呼び出すと、TypeScriptコードが自動的にJSコードに変換されます。
...
<script src="./index.ts"></script>
...
$ parcel index.html
- 新しいTypeScriptプロジェクトの構成に関する詳細については、この投稿を確認してください。
- parcel-plugin-typescript と呼ばれるParcel用のサードパーティのTypeScriptプラグインもあり、ビルド時にタイプチェックとエラーレポートを利用できます。
📦これで、Parcelのゼロ構成の使いやすさと高速バンドル生成でレースに出かけることができます! 詳細については、公式ドキュメントを参照してください。