JavaScript Transpiling and Polyfilling

Last updated Aug 16, 2022

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

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

• Parcel automatically uses Babel to transpile the code.
• We can configure Babel a lot if we want, for example, to define exactly what browsers should be supported, etc.
• Babel works with plugins and presets that can both be configured.
  • A plugin is basically a specific JavaScript feature that we want to transpile.
  • A preset is basically a bunch of plugins bundled together.
• By default, preset-env is being used, it contains all new features that have already became part of the language after passing ECMAScript 4 stages.
• To include experimental feature as well, we may have to manually include the corresponding plugin of that feature.

• New language features, such as new array methods and Promises can’t be transpiled, so it need to be polyfilled instead.
• We can use core-js to polyfill all features or only ones that we want.

1
2
3

import 'core-js/stable';  
// import 'core-js/stable/array/find';  
// import 'core-js/stable/promise';  

• regenerator-runtime is the runtime support for compiled/transpiled async functions.

1
2

// Polifilling async functions  
import 'regenerator-runtime/runtime';