Skip to content
Search

Babel

lastmod 2022-04-08created 2016-04-0830 edits

(For the Python i18n library, see Python-babel)

As you may know, Babel is a tool for transpiling ES6/ES7 code into ECMAScript5 code. Babel consists of many small modules. Babel acts as a kind of box that holds these modules, and it uses small modules (ex. presets) to compile code.

Categories

Installation

webpack 

npm install --save-dev babel-loader @babel/core

Via config 

{
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

For more information see thebabel/babel-loaderrepo.

Create babel.config.json configuration file

You've configured Babel, but it doesn't actually do anything yet. Create ababel.config.jsonconfig in your project root and enable some presets.

To start, you can use the env preset, which enables transforms for ES2015+. 

npm install @babel/preset-env --save-dev

In order to enable the preset you have to define it in your babel.config.json file, like this: 

{
  "presets": ["@babel/preset-env"]
}

Simple example

Add babel: 

yarn add --dev @babel/preset-env

Edit .babelrc: 

{
  "presets": ["@babel/preset-env"]
}

Add a Babel build command to package.json: 

{
  "name": "es6-project",
  "version": "1.0.0",
  "scripts": {
    "build": "babel src/js -w -d dist/js"
  },
  "devDependencies": {
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1"
  }
}

Babel build options:

-w
Watches all files in the target folder for changes and transpiles them automatically. (Short form of the --watch option)
-d
Specifies the folder where the transpiled output is saved. (Short form of the --out-dir option)

Compatibility table

See also

Favorite site

Guide

References

  1. Create_the_latest_JavaScript_web_frontend_development_environment_with_Webpack_and_Babel.pdf ↩

author Zer0 sitemap