There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
i get an error
Failed to parse package.json dat
a.
npm ERR! package.json must be actual JSON
, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm.
npm ERR! Tell the package author to fix t
heir package.json file. JSON.parse
Hi there,
the installation of Babel to ./src/main.js and transpilation was ok and smooth. The same installation of Babel to the local workplace was not so even, because by creating package.json file to root dicrectory was automatically created another file package-lock.json. It probably makes impossible to go next step to create file .babelrc. What is the reason of package-lock.json happening and what is the solution there? Thanks
I submitted a bug report for the transpilation summary optional exercise page.
Just in case I did something wrong, here’s what I did:
Created a second javascript file (‘secondary.js’ in the ‘src’ directory
Re-ran NPM run build
What I expected to happen: Code in both main.js and secondary.js would be transpiled
What actually happened: CLI generated the expected message that each file had been copied/transpiled to the ‘lib’ directory. However, the only ‘main.js’ was transpiled correctly; ‘secondary.js’ only content was “use strict”; nothing more, even though identical code was in both source files. I suspect this may be a bug so reported it as such, if not, would love to know what I did wrong. Are all files required to be named ‘main.js’? I doubt it, because you can’t have more than one.
I think I solved my own problem; Refreshing the page now allows me to see the ‘secondary.js’ code which is now identical with ‘main.js’ transpilation. Still not sure why it does not do it without refreshing but I added an explanatory note to my bug report - I think.
This whole lesson went completely over my head. I was able to follow along with the instructions, but I have no idea what I what I actually did or how I would go about doing the same thing in a real world scenario. At the end, I got a bunch of error messages in the console thing on the right, but the lesson was marked correct anyway.
I know what i did but, like you said … i just wouldn’t know how to go about applying it to a real world scenario or project of mine. Does even this work for windows users?? If so how would you configure and set it up ?
Seriously, what was the point of this lesson? Why didn’t you just teach es5. This make no sense to me, all programming languages are always evolving, not devolving.
I do understand the purpose of Babel, but the whole lesson is kind of wired. I was able to complete it, but not really able to understand what I was doing.
Where do all these commands come from?
Maybe from those who have developed Babel, right?
@arc3335410809 Correct. Basically you could instruct your computer to do pretty much everything you can think of through the Command Line Interface (CLI). Usually you use the Graphical User Interface (GUI) for this. An Interface is a means that allows you to communicate with a computer (or software) in a specific way, either in person or over an network.
On Windows you’d use Command Prompt or Powershell to communicate with the CLI. On Mac you’d use the Terminal application. Say you’d like to open Safari on Mac. You could do it through both the GUI and the CLI.
Through the GUI you’d simply move your cursor to the Dock and click the Safari-icon, right? Through the Command Line Interface (CLI) you’d type:
open -a Safari
In the case of Babel. Babel is installed via the Node Package Manager (npm), thus in order to install Babel, you’d first have to setup npm in your project folder.
You do this by navigating to your project folder in Terminal:
cd Sites/babel-test/(for example)
Then you want npm to install the stuff it needs to install Babel:
npm init
Note: in order for this to work, Node.js (includes npm) needs to be already installed.
Now you’re ready to install Babel. This takes two steps. The first installs the Command Line Interface you need in order to communicate with Babel. The second installs the environment Babel needs to transpile the ES6+ code to ES5.
Install the Command Line Interface by running:
npm install babel-cli -D
Install the environment for transpiling by running:
npm install babel-preset-env -D
I know it’s not enough to enable you install Babel from scratch on your computer, just yet. But I hope it at least clarifies things a bit.
This entire section has me reeling. I have no idea what I did or how to apply it. I could never recreate it.
Even if I did understand what it is I did, is this something a developer is supposed to do on each machine they work on? Or once per program?
I am so disappointed that after a great course on JavaScript, I come to a section like this where I am leaving completely confused and feeling like I haven’t grasped even the basics of this lesson.
I felt the same way too. I never seemed to understand it, neither did anything I did work. Was getting frustrated so I just sorta skipped it and went on to the next lessons. Once I’m done with the other lessons I plan on going back to the Compatibility and Transpilation topic with a lot of Youtube video helpers.
Hi , i want to install and set Babel to my own computer .
I installed node js (version 12.x) but then I don’t know how i can reach the windows bash or the command invit to start with npm init ??
I use windows 8 but if i open node js should it work aswell?
This was a real momentum killer of a lesson. The more I tried to figure it out, the more confused and discouraged I became. I got nothing out of this. I’m relieved to see it wasn’t just me struggling here.
The first column displays the percentage of web browsers that support the ES6+ syntax in the second column. At the end of this project, we will populate the third and fourth columns with the equivalent ES5 syntax and the percentage of web browsers that recognize it.
Does anyone else find this confusing af? First off, there are only two columns. Secondly, The first sentence makes no sense. The first column displays browser support for ES6 syntax. The second column displays support for the transpiled version, once it’s created.
Are any of the content editors on the forums? Is there a better place I should be reporting these sort of copy errors?
) below.
) to up-vote the contribution!
