Babel is a code compiler, which can convert: new JavaScript into old versions TypeScript in JavaScript JSX into JavaScript minify file Installation Install Babel via npm install --save-dev @babel/core @babel/cli Two dependencies are added into package.json
{
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0"
}
Output Add Babel build script into package.json
"scripts": {
"babel": "babel src/components/PostsFeed/posts/babel/unbabeled -d src/components/PostsFeed/posts/babel/babeled"
},
Babel will take files from unbabeled folder & put compiled ones into babeled folder. Configuration Create local configuration file .babelrc.json or root configuration babel.config.json Add plugins / presets into configuration file.
// .babelrc.json
{
"presets": ["@babel/preset-env", "minify"],
"plugins": [
[
"@babel/plugin-transform-template-literals", { "loose": true }
]
]
}
For minification install additional preset with npm install babel-preset-minify --save-dev Execute npm run babel & modern JS is converted into ES5 + minified. Unbabeled vs Babeled file