Next: , Up: Babel   [Index]


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