Presets in Babel are collections of plugins that are configured to perform specific transpilation tasks. A preset is the simplest way to configure Babel, allowing for the transformation of JavaScript code using predefined sets of plugins.
Popular presets:
- @babel/preset-env: Transforms modern JavaScript to ES5-compatible code, automatically adjusting configuration based on target browsers.
- @babel/preset-react: Transforms JSX and other React-specific syntax.
- @babel/preset-typescript: Transforms TypeScript code to JavaScript.
How to use presets:
- Installing presets:
npm install --save-dev @babel/preset-env
- Configuring the .babelrc file:
{ "presets": ["@babel/preset-env"] }
- Transpiling code with Babel:
npx babel src --out-dir lib
Presets simplify Babel configuration, allowing you to quickly start using modern JavaScript without the need to manually set up multiple plugins.