Percel

https://parceljs.org/
モジュールハンドラ / ビルドツール

webpack との違い

• webpack：多機能
• Parcel：細かい設定ができないが、お手軽

特徴

• エントリーポイントに対してparcelを実行すると、ファイルがバンドラされる
  • parcel index.html / parcel script.js
  • JavaScriptかHTMLファイルをエントリーポイントにする
• 依存関係が解消されたファイルそれぞれが出力される
  • HTML / JavaScript / css / img

導入

インストール

npm install parcel (--save-dev / -g)

バンドルされたファイル（ページ）をブラウザで確認する

http://localhost:1234/

エラー

Destination name index.js extension does not match bundle type "html"

https://github.com/parcel-bundler/parcel/issues/3500

{
  "main": "main.js",
  "scripts": {
    "build": "parcel build index.html"
  },
  "devDependencies": {
    "parcel": "^2.12.0"
  }
}

解決方法

• mainの対象を変更する
• targetsを追加する

{
 "main": "main.js",
 "targets": {
   "main": false
 }
}

Hot Module Replacement(HMR)

https://ja.parceljs.org/hmr.html
ページ全体を更新しなくても、実行時にブラウザ内のモジュールを自動的に更新する仕組み
変更を行ってもアプリケーション内の状態（state）は保持

if (module.hot) {
  // あるモジュール or その依存関係のいずれかが実行されたときにコールバック関数を実行
  module.hot.accept();
}