3.4.1 Overview

How to compile JavaScript application code that uses ES2015+ syntax into code that works in current browsers and polyfill missing features.

1. Install Babel

   npm install --save-dev @babel/core @babel/cli @babel/preset-env
   npm install --save @babel/polyfill
   

2. Create a config file babel.config.json in the root of your project ( > ‘v7.8.0’)

   {
     "presets": [
       [
         "@babel/env",
         {
           "targets": {
             "edge": "17",
             "firefox": "60",
             "chrome": "67",
             "safari": "11.1",
           },
           "useBuiltIns": "usage",
           "corejs": "3.6.5",
         }
       ]
     ]
   }
   

   Or babel.config.js if you are using an older Babel version

   const presets = [
     [
       "@babel/env",
       {
         targets: {
           edge: "17",
           firefox: "60",
           chrome: "67",
           safari: "11.1",
         },
         useBuiltIns: "usage",
         "corejs": "3.6.4",
       },
     ],
   ];
   
   module.exports = { presets };'
   

3. Run this command to compile all your code from the src directory to lib:

   ./node_modules/.bin/babel src --out-dir lib
   npx babel src --out-dir lib