(Supercharge your JavaScript workflow with powerful developer tools)
As JavaScript projects grow, we need tools to help:
This is where Babel, Webpack, and npm come in.
Babel is a tool that lets you write modern JavaScript (ES6+) and convert it into code that works in older browsers (like IE11).
let, const, modules, etc.// ES6 code
const greet = (name) => `Hello ${name}`;
// Babel output (ES5)
var greet = function(name) {
return 'Hello ' + name;
};npm install --save-dev @babel/core @babel/cli @babel/preset-envCreate a .babelrc config file:
{
"presets": ["@babel/preset-env"]
}Transpile a file:
npx babel script.js --out-file script-compiled.jsWebpack is a powerful tool that bundles JavaScript files (and other assets) into one or more optimized output files.
.js files into onenpm install --save-dev webpack webpack-cliproject/
├── src/
│ └── index.js
├── dist/
│ └── bundle.js (output)
├── webpack.config.jsconst path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development'
};npx webpacknpm is the default package manager for Node.js. It lets you install, update, and manage third-party libraries or tools.
npm init # Initialize a new project
npm install package # Install a package
npm install -D package # Install as dev dependency
npm uninstall package # Remove a package
npm update # Update all packages{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"build": "webpack",
"start": "node server.js"
}
}Instead of running commands manually, add them to scripts:
npm run build
npm startMastering these tools is essential for working in modern front-end frameworks and full-stack environments.