FAQ: Browser Compatibility and Transpilation - Transpilation With Babel

This community-built FAQ covers the “Transpilation With Babel” 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 Transpilation With Babel

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!

Hello,
I’m stuck with this exercise.

I don’t get it, where/how to write in the Terminal?
Please see the screenshot.
Initially I thought that the Browser might be faulty, but I tried Google Chrome and same issue occurs.

Thank you!
npm|690x334

3 Likes

Update:
I’ve found a solution.
So for some reason the Terminal did not load properly (even in the 2nd browser), after a few page refresh it worked fine.

When I type:

npm run build
and then:

./lib/main.js
I am getting message that permission was denied.
Anybody got same problem or know solution?
See ssCapture2

I submitted feedback for this exercise, because it leaves a lot unwritten. Badly written instructions leave it unclear that you should press enter for the first two steps, then it’s also unclear how exactly you should access the ES5 code (mentioned in step 3). Codecademy usually has good instructions in it’s exercises, but in this one the writer assumed a lot and left out details accordingly.

8 Likes

ya Im not sure how to run that .lib file to check out what babel did. can someone help?

For me, when I try to access the folder ./lib/main.js it says “No such file or directory”.
I also think they left a lot of instructions unwritten. Even when they say to refresh to see the lib/main.js directory, they don’t explain how to refresh. I searched online and there is no refresh command for npm. The closest to refresh would be reload or restart but none of them worked for me as I couldn’t find a way to view the directory :confused:
Anyone any tips?

I agree it’s poorly written, especially for CC where instruction is usually clear. I muddled through it as follows:

Hit ‘enter’ after each step of code in the terminal (window to the far right labeled ‘bash’):

‘npm install babel-cli’ followed by ‘enter’
‘npm install babel-preset-env’ followed by ‘enter’
‘npm run build’ followed by ‘enter’

Then, navigate to ‘./lib/main.js’ using the folder icon to the left of ‘main.js’. Once you click the folder icon, simply navigate to that file. Click on ‘main.js’ inside ‘lib’ and another window will be created with the ES5 code (transpiled from ES6). See screenshot:

13 Likes

Despite doing all of that, I have neither a ./lib nor a ./node_modules folder. I’m not sure what I should do, please help :smiley:

Ok, it has suddenly appeared, thanks anyway

You rock for showing this. I was stuck, and you unstuck me!

4 Likes

Hi,

I don’t get what this terminal is. I mean, when I work on an exercise I can always replicate it on my computer by creating a .html and .js file and opening it in my browser to see it I can really reuse what I learned. But here I don’t get it, if I wanted to do the same outside of CC website, where would I have to run the “npm install babel-cli” etc?

Thx,

1 Like

On Windows 10, type on the search bar (bottom right) terminal or Command Prompt. Then after writing in each line of code, press enter.

I am getting an environment variable error when I try to install via npm. What env var do I need? I will try to create it manually.

I have npm installed to work with my Visual Studio Code editor. Is there likely to be a conflict?

This exercise uses bash syntax, so you need a bash terminal. If you’re on mac, just open a terminal. If you’re on windows, you should use either git-bash or equivalent. Here is a link to the lesson on codeacademy explaining terminals:

setting up command line

1 Like

If you want to open the file in command line, you have to open it in an editor, for instance vim:

vim ./lib/main.js

to exit vim you type “:q”

if you just type ./lib/main.js it tries to run the file as an executable, hence the permission denied

Hey, I’m using Linux and I’m pretty new to it. When I tried installing babel I got the following output :

marie@marie-Latitude-E5450:~$ npm install babel-cli
/home/marie
├── babel-cli@6.26.0
└── babel-preset-env@1.7.0

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.2.9
npm WARN enoent ENOENT: no such file or directory, open ‘/home/marie/package.json’
npm WARN marie No description
npm WARN marie No repository field.
npm WARN marie No README data
npm WARN marie No license field.
marie@marie-Latitude-E5450:~$

Can anyone tell me what this means ?
Thank you !

Hi guys, i’m trying to figure out how to get this set up on windows so i can test it but this lesson is referring to Mac users. So i think i have figured some things out by myself, for instance you cannot use Cygwin with this because it doesn’t work correct? So i have downloded the node.js package for Windows and it came with 2 command lines. One is a bash CL and the other is one made by Node.js can anybody help? None of the commands i use to navigate using Cygwin (Bash for windows) work … i want to test what i have learnt in this exercise on an actual js file of my own

Thanks, that answered my question of where to find that library! Never noticed the folder icon before, and up until now, haven’t needed it.

2 Likes

For those looking for the ./lib/main.js file, in the terminal type:

nano ./lib/main.js

or…

vim ./lib/main.js

these commands enable you to see the file with bash’s trusty text editors.