Open4
Percel
![ありま](https://res.cloudinary.com/zenn/image/fetch/s--AjnwpzrM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/42596b1848.jpeg)
モジュールハンドラ / ビルドツール
webpack との違い
- webpack:多機能
- Parcel:細かい設定ができないが、お手軽
特徴
- エントリーポイントに対してparcelを実行すると、ファイルがバンドラされる
-
parcel index.html
/parcel script.js
- JavaScriptかHTMLファイルをエントリーポイントにする
-
- 依存関係が解消されたファイルそれぞれが出力される
- HTML / JavaScript / css / img
![ありま](https://res.cloudinary.com/zenn/image/fetch/s--AjnwpzrM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/42596b1848.jpeg)
導入
インストール
npm install parcel (--save-dev / -g)
バンドルされたファイル(ページ)をブラウザで確認する
http://localhost:1234/
![ありま](https://res.cloudinary.com/zenn/image/fetch/s--AjnwpzrM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/42596b1848.jpeg)
エラー
Destination name index.js extension does not match bundle type "html"
package.json
{
"main": "main.js",
"scripts": {
"build": "parcel build index.html"
},
"devDependencies": {
"parcel": "^2.12.0"
}
}
解決方法
- mainの対象を変更する
- targetsを追加する
{
"main": "main.js",
"targets": {
"main": false
}
}
![ありま](https://res.cloudinary.com/zenn/image/fetch/s--AjnwpzrM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/42596b1848.jpeg)
Hot Module Replacement(HMR)
変更を行ってもアプリケーション内の状態(state)は保持
if (module.hot) {
// あるモジュール or その依存関係のいずれかが実行されたときにコールバック関数を実行
module.hot.accept();
}