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

2021年3月19日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 ./"