Parcelを使ってバンドルファイルを作成する



設定なしにバンドルファイルが作成できるビルドツール「Parcel」の紹介です。

 Webページで css や javascript などを " .min.* " などの1ファイルにバンドルすることは、今や よくある事の 1つです。

バンドルファイルを作成するイメージ

 webpack を使ってバンドルファイルを作成する為には、それぞれのファイル & タイプにあったプラグインが必要になり、特に画像やフォントなどが入った CSS Framework用のテンプレートとなるとルールの記述も長くなる傾向にあります。

過去記事 : webpack2でテンプレート用の複数ライブラリを1CSSファイルにビルドする

その様な複雑なバンドルファイルを作成を 簡単に実現出来る アセットビルドツールが「Parcel」です。

parcel で出来ること

- 面倒な設定なしに、アセットファイル ( css, javascript, 画像など) を1ファイルにした バンドルファイルが作成できる

parcel のインストール

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に用意されているコマンド ・オプション
parcel FILE : devサーバー( localhost:1234 )が自動的に起動し、' dist ' フォルダにバンドルファイルが作成される
parcel -d DIR FILE : 指定ディレクトリにバンドルファイルを展開 ( devサーバー起動 )
- parcel build FILE : バンドルファイルが作成されるが、ファイルが minify ( 圧縮 ) される

 

parcel の使い方

 簡単なサンプルとして 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 や 画像ファイルであっても、問題はありません。 

* 展開されたbundleファイル


 Railsや Laravelなど、フレームワークを使っている場合でも、バンドルファイル作成時に ' build 'オプションをを付ければ、devサーバーが起動せず、ファイルも圧縮されます。

*  作成された ' parceltest.css ', ' parceltest.js ' を読み込めばビルドしたファイルが使用できます。

# 本番環境で使う場合
parcel build -d YOURDIR entry.js

 

Summary

 以上が Parcelを使ったバンドルファイルの作成方法の紹介でした。

 執筆時点 ( v 1.2.0 )では ' react ' や ' vue ' ファイルのトランスフォームには対応していないので、webpackから全てを置き換える事は難しいですが、Webサイトのテンプレート用として使えば、手間いらずでバンドルファイルが作成できそうです。

GitHub : parcel-bundler/parcel 

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ