JavaScirptバンドラー【Parcel】の基本的な使い方
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 ./"