Using Babel 7.10 to compile to module js files without imports

user_13764271 0
Viewed 388

tl;dr: How to use babel 7.10 as a complete beginner for frontend js files in a fullstack node app?

I am trying to use the newest version of Babel (7.10.5) to compile the JS files of my website and this is my first time using Babel. Since the documentation of babel doesn't seem to be fully updated or because I'm too dumb to get it.

I only produce JS files with either "require", which the browser doesn't understand, or with some "import" of some babel file that the browser doesn't see.

I have no clue what I should be doing, I have tried with a babel.config.json file as well as a .babelrc file. I installed and uninstalled all kinds of packages and plugins and whatever, but nothing seemed to work.

I don't care about module size or anything advanced, I just want my simple website written with es6 to work in all browsers, to use es5 basically. I know that I need @babel/cli @babel/core and @babel/preset-env and that I need some kind of config file and then I wanna run it via the command line. What's the easiest way to do this?

As a side note, I am not using any framework, just plain old vanilla JavaScript

Sorry if this question is super dumb or if it's badly asked. I can't show any code, because I don't

babeljs javascript
1 Answers

1, install dependencies:

npm i @babel/cli @babel/core @babel/preset-env

2, add .babelrc:

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

3, edit package.json, in this example, make sure all your source files in "src" dir

//package.json
{
  "scripts": {
    "build": "babel src --out-dir dist"
  },

4, run script, generated files will be in "dist" dir

npm run build
user_139833240
Related