In Browser Tool for Conversion to ES2015 from ES6

• 1. Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side. See setup build systems for more information.
• 2. You can use @babel/standalone as a precompiled version of Babel or run a bundler on Babel yourself. Check the usage section below for how to use it as a script.
• You can also use the many online tools to prototype a script:

• CLI Tool for conversion to ES2015 from es6

• 1.first you need Node.js (stable version) So you have to down load it on machine Check you have node in your machine

              command  :: node -v  => v10.15.3 (for my machine)
                        

  gives version of node in your machene loaded
• 2. npm package management check weather loaded and version

              command :: npm -v => 6.4.1 (for my machine)
                      

• 3. initialize npm in a folder of project you working

              command :: npm init
                      

  that creates package.json
• 4. Now install dependencies in to project folder "babel2"

              command :: npm install --save-dev babel-cli
                      

• 5. Now check test

              command :: npm run test  ==> Error: no test specified .....
                      

• 6. Over Objective is turn javascript file in to ES2015 code javascript. For that you have to add few following lines to package.json, in "scripts": and below "test": line add following code "build":"babel script.js -d js", Here -d flag is shows in which directory, in our case js and script.js is file that we have ti grab in folder js and "build" is command

               {
                        "name": "babel2",
                        "version": "1.0.0",
                        "description": "",
                        "main": "index.js",
                        "scripts": {
                        "test": "echo \"Error: no test specified\" && exit 1",
                        "builds" : "babel script.js -d js"
                        },
                       "author": "",
                       "license": "ISC",
                       "devDependencies": {
                       "babel-cli": "^6.26.0"
                    }
               }
                      

• 7. Now run

                command :: npm run build
                      

  in babel2 folder you get new "js" folder and inside you get script.js file it is simple created folder and copy file that`s simple.
• 8. Over objective is to convert javascript file script.js in to ES2015 for that Create .babelrc configuration file To start, you can use the env preset, which enables transforms for ES2015+

                command :: npm install --save-dev-preset-es2015
                      

• 9. Now create file .babelrc.js write code as below :

                {
                   "presets": ["es2015"]
                }
                      

• 10. now if you have your original script.js file in another folder than as for example in "src" folder than you have to change pacckage.json as bellow :

                "build": "babel script.js -d js"
                      

• 11.Suppose we create second file script1.js in src folder THEN in js folder we get two file inside.
  12.instead all the time compile and see changes you can add flag --watch in package.json you can change package.json below ::

               "build": "babel src --watch -d js"
               //now change original script.js or script1.js file in
               //src folder and it reflects change as follows instantly :
               src\script1.js -> js\script1.js
               src\script.js -> js\script.js
               src\script.js -> js\script.js
                      

  And to cancel watch then control+c command to terminate
• 13.Now how to load server so we can see changes live in browser

                command :: npm install --save-dev http-server
                //Now to activste server change package.json as follows :
                "serve": "http-server"
                      

  if for some reason browser not showing change then at refresh button right click and clear catch. in chrome browser if error of "Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at http://localhost:8383/favicon.ico" then add line

                          
                <link rel="shortcut icon" href="">
                //and still error persist then add
                <link rel="icon" href="data:;base64,iVBORw0KGgo=">