babel.config.js vs .babelrc (Vue + Express in same directory)

1.7k Views Asked by At

You can directly skip to the last part of this section for the exact questions? For full context, read from the start.

This is how I initiated my Vue project:

vue create awesome-frontend

choose all defaults and ended up with babel.config.js file in the root directory with these contents:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

Next up, I installed @babel/cli, @babel/preset-env and express using npm and created a demo server.js in the root directory with following contents:

import express from "express";
const app = express();
const port = 8080;

app.get('/',(req,res)=> {
  res.send('Express Home page')
});

app.listen(port,() => console.log(`Server started running on ${port}`));

Now I wish to compile server.js using babel with preset: preset-env and I tried the followings things:

1) Created a .babelrc in the root directory with following contents:

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

2) Tried setting preset in the command line npx babel --preset @babel/preset-env server.js -d dist

In both cases, babel.config.js seems to take priority. If that actually is the case, then how can I tell babel to ignore this file in some scenarios. Is there a way out?

One solution to my problem was to copy the contents of babel.config.js to .babelrc and then delete babel.config.js so that my VUE build are not affected (I don't really know what happens under the hood) and then I could build server.js by ignoring .babelrc using this command

npx babel --no-babelrc --presets=@babel/preset-env server.js -d dist

Now I wish to know what exactly is happening here and is there any better solution to my problem?

Q1: Is there any way to ignore babel.config.js using command line just like we can ignore .babelrc with --no-babelrc ?

Q2: Is there any way to use multiple babel config files under the same project? So that while compiling with babel, we can mention which config file to use?

Q3: Are babel.config.js and .babelrc essentially the same? As I mentioned above, I copied the contents of babel.config.js to .babelrc and then deleted babel.config.js. But all VUE builds are working fine. Is that future safe?

Tried googling, but could find anything useful. Thanks, in advance.

0

There are 0 best solutions below