Configuring Babel with A Project

Babel is one of the architecture of modern javascript eco-system which works as a transpiler or converter to compile next generation javascript code to be worked with older browser. To work with babel we need to configure with the project. First of all we need to create babel config file in the project root folder as follows:

.babelrc

before going with the settings we need to install all the dependencies of babel using npm package as follows:

npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-env babel-plugin-syntax-dynamic-import babel-preset-stage-2 babel-polyfill 

After installing babel dependencies we need to set those presets we have installed as npm package as follows:

{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [
                    "> 1%",
                    "Last 2 versions"
                ]
            },
            "useBuiltIns": "entry"
        }],
        "stage-2",
        "react"
    ],
    "plugins": [
        "syntax-dynamic-import"
    ]
}

In the above settings we have added "env" preset to support target browsers from minimum to maximum version of browsers. Then we have added "react" preset to work with react jsx and next generation javascript code.