Babel - rohit120582sharma/Documentation GitHub Wiki

If using features of ES6, Webpack/Parcel needs Babel to process ES6 into ES5 syntaxes in order to work.

First, we should install the package. For this, open your terminal, navigate to the root directory of your project and run the following:

# For core
$ npm install --save-dev @babel/core

# For presets
$ npm install --save-dev @babel/preset-env @babel/preset-react

# For plugins
$ npm install --save-dev @babel/plugin-proposal-class-properties
$ npm install --save-dev @babel/plugin-syntax-dynamic-import
$ npm install --save-dev @babel/plugin-proposal-object-rest-spread
$ npm install --save-dev babel-plugin-module-resolver

# For webpack
$ npm install --save-dev babel-loader

• @babel/core is the main dependency that includes babel transform script.

• @babel/preset-env is the default Babel preset used to transform ES6+ into valid ES5 code. Optionally configures browser polyfills automatically.
• @babel/preset-react is used for transforming JSX and React class syntax into valid JavaScript code. It includes the following plugins/presets:
  • preset-flow
  • syntax-jsx
  • transform-react-jsx
  • transform-react-display-name

In order to start compiling various features you need to install plugins:

• @babel/plugin-syntax-dynamic-import plugin allows parsing of import()
• @babel/plugin-proposal-class-properties - In JavaScript, current class syntax only allows for you to define methods inside of a class, nothing else. This plugin will transform class properties in such a way that you can define class properties using property initializer syntax (ie. by using the = assignment operator).
• @babel/plugin-proposal-object-rest-spread plugin allows Babel to transform rest properties for object destructuring assignment and spread properties for object literals.
• babel-plugin-module-resolver plugin to add a new resolver for your modules when compiling your code using Babel. This plugin allows you to add new "root" directories that contain your modules. It also allows you to setup a custom alias for directories, specific files, or even other npm modules.

• babel-loader is a webpack loader that hooks Babel into webpack. We will run Babel from webpack with this package.

In order to use Babel presets, create a new .babelrc file:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-dynamic-import",
        [
            "module-resolver",
            {
                "cwd": "babelrc",
                "root": ["./src"],
                "extensions": [
                    ".js"
                ],
                "alias": {
                    "common": "./src/common",
                    "assets": "./src/assets",
                    "modules": "./src/modules",
                    "nav": "./src/nav",
                    "test": "./src/test",
                    "translations": "./src/translations",
                    "api.config": "./src/api.config"
                }
            }
        ]
    ]
}