JavaScript Bundling With Parcel

Last updated Aug 16, 2022

• ملاحظة مؤرشفة
• Java script

المعرفة:: JavaScript
الحالة:: #ملاحظة_مؤرشفة
المراجع:: The Complete JavaScript Course 2022 From Zero to Expert

• To install Parcel npm i parcel --save-dev.
• To use it with local installation we need to use npx npx parcel index.html or npm scripts by adding a configuration like this in package.json, then it can be used using npm run X.

1
2
3
4

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

• Parcel can also do the same job as live-server.
• As Parcel bundles the code into one file, we no longer need to set <script type="module">.
• Parcel automatically uses Babel to transpile the code.
• Parcel can also import assets import icons from 'url:../img/icons.svg';.

Whenever a module is changed, Parcel will trigger a rebuild, and that new modified bundle will automatically get injected into the browser without triggering a whole page reload.

1
2
3

if (module.hot) {  
  module.hot.accept();  
}