Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Babel is a JavaScript compiler that transforms modern JavaScript (ES6+, JSX, TypeScript) into older JavaScript that works in all browsers. It lets you use the latest features without worrying about browser support.
ES6+ → ES5 for older browsers
Compile JSX to JavaScript
Add missing browser features
Reads modern JavaScript code
Converts to compatible syntax
Outputs compatible code
// Arrow functions
const greet = (name) => `Hello, ${name}!`;
// Destructuring
const { firstName, age } = user;
// Classes
class Person {
constructor(name) {
this.name = name;
}
}
// Spread operator
const newArray = [...oldArray, 4, 5];
// Promises
const fetchData = async () => {
const data = await fetch(url);
return data.json();
};// Regular functions
var greet = function(name) {
return "Hello, " + name + "!";
};
// Variable assignment
var firstName = user.firstName;
var age = user.age;
// Function constructor
function Person(name) {
this.name = name;
}
// concat
var newArray = oldArray.concat([4, 5]);
// Promise polyfill
var fetchData = function() {
return fetch(url).then(function(data) {
return data.json();
});
};# Install Babel core and CLI
npm install --save-dev @babel/core @babel/cli
# Install preset for modern JavaScript
npm install --save-dev @babel/preset-env
# For React (JSX support)
npm install --save-dev @babel/preset-react
# For TypeScript
npm install --save-dev @babel/preset-typescript
# Compile a file
npx babel src/app.js --out-file dist/app.js
# Compile entire directory
npx babel src --out-dir dist
# Watch mode (auto-compile on changes)
npx babel src --out-dir dist --watch// babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: ['last 2 versions', 'ie >= 11']
},
useBuiltIns: 'usage', // Auto-import polyfills
corejs: 3
}
],
'@babel/preset-react' // For JSX
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime'
]
};
// Or .babelrc (JSON format)
{
"presets": [
["@babel/preset-env", {
"targets": "> 0.25%, not dead"
}],
"@babel/preset-react"
],
"plugins": []
}Collections of plugins bundled together
@babel/preset-envModern JavaScript (ES6+)
@babel/preset-reactJSX and React features
@babel/preset-typescriptTypeScript support
Individual transformations for specific features
transform-arrow-functionsArrow → regular functions
proposal-class-propertiesClass property syntax
transform-runtimeOptimize helper code
// Install babel-loader
npm install --save-dev babel-loader
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/, // .js and .jsx files
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
cacheDirectory: true // Speed up compilation
}
}
}
]
}
};
// Now Webpack will use Babel automatically!Transforms modern code
Works in all browsers
Presets = plugin bundles
@babel/preset-env most common
Specify browser targets
Only transpile what's needed
Works with Webpack, Vite
babel-loader for bundlers