FAQ: Browser Compatibility and Transpilation - Review

This community-built FAQ covers the “Review” exercise from the lesson “Browser Compatibility and Transpilation”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction To JavaScript

FAQs on the exercise Review

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 (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 (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

/home/ccuser/.npm/_logs/2019
-01-24T21_02_30_247Z-debug.log

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

Are these command line tools only for Linux Terminal? Is there any way I can do it on other OS?

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.

I don’t have Linux, whitch made all of this useless, I have windows instead. And 93% of modern browsers SUPPORTS ES6
So please fix these exercises

2 Likes

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.

13 Likes

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 ?

1 Like

Is Babel really usefull now in the end of 2019 ? As a lot of ES6 things are now compatible ?

Shouldn’t devs stop using it so the clients must update their browser or force browser to update ?

:slight_smile:

This was very interesting lesson though

1 Like

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.

1 Like

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?

2 Likes

@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.

  1. You do this by navigating to your project folder in Terminal:

    cd Sites/babel-test/ (for example)

  2. 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.

  1. Install the Command Line Interface by running:

    npm install babel-cli -D

  2. 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.

4 Likes

Would you mind sharing some good resources which describe how to work with CLI further? Thanks!

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.

5 Likes

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.

1 Like

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.