JavaScirptバンドラー【Parcel】の基本的な使い方

2021年3月19日2021年3月26日JavaScript

JavaScirptバンドラー【Parcel】の基本的な使い方をまとめました。

JavaScirptバンドラー【Parcel】の基本的な使い方

Parcel(parcel-bundler)はnpmで入手できるビルドツールです。

Parcelをローカルにインストールする

npm i parcel --save-dev

というコマンドを入力します。dependenciesが異なるため、このようなコマンドラインとなります。 コードにいれる通常のlodashなどはdependenciesにいれますが、parcelはそれとは別のdevDependenciesにいれます。 devDependenciesはアプリケーションを開発するときに必要なツールのようなものです。実際のコードには含まれません。

ローカルにインストールされたパッケージを使う2つの方法

parcelはローカルにインストールされています。 parcelのようなローカルにインストールされたパッケージをコンソールで利用するには、2つ方法があります。npxとpackage.jsonのscriptsに書く方法です。

方法1：npxコマンド

npxはnpmのビルドインコマンドです。

npx parcel index.html

最後のファイルはバンドルアップしたいscriptタグを含めているエントリーポイントを書きます。つまり、index.htmlとなります。 成功するとhttp://localhost:1234/といったサーバーに案内されます。 失敗した場合は、

sudo npm i parcel

と再度インストールのコマンドを入力するか、アンインストールしてから再度入力してみましょう。

npm uninstall parcel

でアンインストールができます。 parcelを利用するときは、scriptタグにtype="module"を含める必要はありませんので削除しましょう。 dist(distribution)というフォルダを確認すると、ファイナルユーザーに送るファイルが格納されています。

方法2：package.jsonのscriptsに書く

package.jsonのscriptsに書く方法は次のように記述します。

"scripts": {
"start": "parcel index.html"
},

そして、

npm run start

とすればnpmのコマンドでもparcelを利用することが可能です。 ビルドする場合は、次のように追記します。

"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html l --dist-dir ./dist"
},

そして、

npm run build

とします。すると、圧縮されたバージョンを書くにすることができます。

parcelのビルドでURLの前にスラッシュがついてしまう

ビルドでURLの前にスラッシュがついてエラーになる場合、 次のようにすると解決するかもしれません。

"build": "parcel build index.html --public-url ./"