ES6 Lesson #1 - Babel

For starters, not all browsers understand es6 in 2020. In order to solve the problem, we need to install Babel, which will transform es6 into standard jаvascript.

We can do it with npm. If you have not worked with NPM, first you need to install it from the official site https://nodejs.org/. Next create a folder with name "es6". Open any terminal, (CMD or Terminal or GitTerminal) in it, and run command:

npm init

Terminal will ask u some questions. Just click on enter without entering anything except the "entry point". In entry point write "src/js/index.js". If u did everything right - npm will show u:

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "src/js/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

If true push enter one more time. And npm will create package.json in your folder. After, without closing the terminal, write the command that will install babel:

npm i babel-cli babel-core babel-preset-es2015 --save-dev

After open u`r package.json and in entry "script" add next:

"build": "babel src/js -d dist --presets es2015",
"watch": "babel src/js -d dist --presets es2015 -w"

Now your package.json must look like this:

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "src/js/index.js",
  "scripts": {
    "build": "babel src/js -d dist --presets es2015",
    "watch": "babel src/js -d dist --presets es2015 -w"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1"
  }
}

If yes, then you did everything right. Now a little explanation:

Where src/js is a folder where your scripts are located. dist is a folder where compiled scripts will be added. "main" is the entry point (your main script), which will includding another js. "scripts" is a scripts what u can run from npm. Dist is dynamic folder, do not create any files in it.

If u want to follow this example, u can create the following structure:

For the test, write the following code in index.js, which we will analyze later:

let veleravtelevizore = "Hello World";

And run npm command: npm run build. After, Babel will create dist/index.js with the following content:

 

If so, then everything went according to plan.

Congr. 😀🤓👾

If everything worked out, then we correctly created the entire structure for further work.