I created a test project here: https://github.com/baleksandr48/babel-question
Shortly: I created NextJS application and want to use pages/* files for rendering pages, and pages/api/[...catchAll].ts file for handling other requests. I decided to add NestJS - it allows me to divide the whole code on modules.
What is the problem: NestJS uses decorators and when I click button "get data" I have an error:
Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled
I googled a little and solved this problem by adding .babelrc file:
{
"presets": ["next/babel"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}
But I wonder the question could I solve it without babel?
When I delete .babelrc file and run command ts-node backend/main.ts my application works without error.
Why? Am I right that when I run backend separately I transpiles typescript to es5 (as I set in tsconfig.json) and node works fine with es5.
But when I run the app with npm run dev then what?
- Isn't code been transpiled to es5?
- isn't everything what I have in
pages/apibeen executed only on the backend side via node, but not via browser? - if code been executed in browser, isn't browser works fine with es5?
Please describe me what is the difference between initialising backend app through npm run dev and ts-node backend/main.ts ?