設定なしにバンドルファイルが作成できるビルドツール「Parcel」の紹介です。
Webページで css や javascript などを " .min.* " などの１ファイルにバンドルすることは、今や よくある事の １つです。
webpack を使ってバンドルファイルを作成する為には、それぞれのファイル & タイプにあったプラグインが必要になり、特に画像やフォントなどが入った CSS Framework用のテンプレートとなるとルールの記述も長くなる傾向にあります。
過去記事 : webpack2でテンプレート用の複数ライブラリを1CSSファイルにビルドする
その様な複雑なバンドルファイルを作成を 簡単に実現出来る アセットビルドツールが「Parcel」です。
- 面倒な設定なしに、アセットファイル ( css, javascript, 画像など) を1ファイルにした バンドルファイルが作成できる
parcel は node.jsで作られているパッケージなので、' npm ' 又は ' yarn ' を使ってインストールします。
# npm
npm i -g parcel-bundler
#yarn
yarn global add parcel-bundler
* babelを使って javascript コードをトランスフォームする場合
// yarn
yarn add babel-preset-env --dev
// npm
npm i babel-preset --save-dev
// .babelrcファイルを作成し、下記の設定を追加
{
"presets": ["env"]
}
Parcelはコマンドライン上で使うライブラリで、 ビルド時の僅かなオプションの使い方がわかれば、すぐにバンドルファイルが作成出来ます。
Parcelに用意されているコマンド ・オプション
- parcel FILE : devサーバー( localhost:1234 )が自動的に起動し、' dist ' フォルダにバンドルファイルが作成される
- parcel -d DIR FILE : 指定ディレクトリにバンドルファイルを展開 ( devサーバー起動 )
- parcel build FILE : バンドルファイルが作成されるが、ファイルが minify ( 圧縮 ) される
簡単なサンプルとして npm からインストールした ' bootstrap ' と assets フォルダにダウンロードした ' font-awesome 5' を使ってバンドルファイルを作成する例が下記になります。
/* bootstrapとfont-awesomeを組み合わせたバンドルファイルの作成例 */
// bundle.js
require('bootstrap/dist/css/bootstrap.css')
require('bootstrap/dist/js/bootstrap.min')
require('./assets/fontawesome-free-5.0.1/svg-with-js/js/fontawesome-all.min')
続いてテンプレート用のhtmlファイルには、bootstrapと font-awesomeを使えるように 記述しました。
<!-- body内部のみ記述しています * index.html -->
<body>
<div class="container">
<h1>Parcelを使ったデモ</h1>
<div class='row'>
<div class='col-md-6'>
<h3> Bootstrapのコンポーネント</h3>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div class='col-md-6'>
<h3> Font-awesome 5のアイコン</h3>
<i class="fab fa-line fa-3x"></i>
<i class="fab fa-google fa-3x"></i>
<i class="fa fa-info fa-3x"></i>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./bundle.js"></script>
</body>
ビルドをする ' parcel ' コマンドを入力すると、ファイルがバンドル化後 ' dist ' フォルダに展開、そしてdevサーバーが起動します。
# parcelコマンドを実行
parcel index.html
# 展開するフォルダを指定する場合
# parcel -d dist2 index.html
# ポートを指定する場合 ポート 3333を使用する例
parcel index.html -p 3333
index.html 向けにビルドを実行 
localhost:1234 にアクセス 
Bootstrap の css ファイルは ' ttf ', ' wof ' などのフォント用のファイルを内部で参照していますが、ビルド時にdistフォルダに作成され、バンドルファイルは ' parceltest ' というファイル名で保存されます。
もし、ファイルが scss や 画像ファイルであっても、問題はありません。
Railsや Laravelなど、フレームワークを使っている場合でも、バンドルファイル作成時に ' build 'オプションをを付ければ、devサーバーが起動せず、ファイルも圧縮されます。
* 作成された ' parceltest.css ', ' parceltest.js ' を読み込めばビルドしたファイルが使用できます。
# 本番環境で使う場合
parcel build -d YOURDIR entry.js
以上が Parcelを使ったバンドルファイルの作成方法の紹介でした。
執筆時点 ( v 1.2.0 )では ' react ' や ' vue ' ファイルのトランスフォームには対応していないので、webpackから全てを置き換える事は難しいですが、Webサイトのテンプレート用として使えば、手間いらずでバンドルファイルが作成できそうです。
GitHub : parcel-bundler/parcel
