.babelrc configuration placed in package.JSON

10,828

For anyone who is interested it was on the official website:

Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.

Share:
10,828
Willem van der Veen
Author by

Willem van der Veen

Started programming since 2014 in Java because of interest. Since then I developed a passion with a variety of languages and technologies. I am currently making web applications professionally.

Updated on June 05, 2022

Comments

  • Willem van der Veen
    Willem van der Veen almost 2 years

    Currently exploring webpack different tools associated with it. Now I am using Babel for transpiling ES6 code into ES5 code. I came accross the need for a .babelrc file which holds the configurations for Babel. However, on the website of Babel I also saw that you could also place these configurations into the package.json file. Like this:

    Package.json File:

    {
      "name": "webpack-tutorial",
      "version": "1.0.0",
      "description": "",
      "main": "app.js",
      "scripts": {
        "dev": "webpack --mode development",
        "build": "webpack --mode production"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-env": "^1.7.0",
        "webpack": "^4.16.2",
        "webpack-cli": "^3.1.0"
      },
      "babel": {
        "presets": [
            "env"
        ]
      }
    
    }
    

    Now when I run npm run dev Babel also works and the code gets transpiled succesfully.

    How does Babel know to access the package.json file? Does it first look for an .babelrc file and then if this is not present does it automatically look for its configurations in the package.json? How does Webpack interact with both Babel and the package.json file to produce this result?