1

How can I compile a .jsx file using the npx babel-cli [inpfile].jsx --out-file [outfile].js --plugin=@[someplugin] command. I have tried --plugin=@plugin-transform-react-jsx but it gives error on the very first JSX expression.

I have babel-cli, babel-core etc. packages installed.

I can use create-react-app and everything works fine but I want to do this manually, compiling JSX.

Also if ES6 to ES5 conversion is possible with the same procedure; please state it also.

Any help would be appreciated.

abdullahQureshee
  • 322
  • 2
  • 12
  • I believe it should just be `babel`, not `babel-cli` https://babeljs.io/docs/en/babel-cli#compile-files – Jayce444 Dec 26 '20 at 08:37
  • @Jayce444 if you try to install babel, npm will tell you that it is deprecated, use babel-cli because package has been renamed. If you try compiling, it gives error that you have mistakenly typed babel, use babel-cli. I have done complete research on my end before asking on SO. Thanks for investing time btw. – abdullahQureshee Dec 26 '20 at 08:42
  • Can you share your package.json as well? I need to see all your babel versions (including presets/plugins) – tmhao2005 Dec 26 '20 at 15:21
  • @tmhao2005 I don't have any package file. I don't know much about this. I've been using `create-react-app`. – abdullahQureshee Dec 26 '20 at 16:07
  • Ah I see. But you should install babel things locally at your project. Try to install them and try again. – tmhao2005 Dec 26 '20 at 16:11
  • Do you know which ones should be installed? If you didn’t, I would offer a help – tmhao2005 Dec 26 '20 at 16:30
  • @tmhao2005 yes! sure, I'm here seeking help. I've tried installing babel-cli, babel-core and preset-react. but preset-react says babel-core isn't installed but it is installed. You can start explaining from scratch. – abdullahQureshee Dec 26 '20 at 16:40

1 Answers1

4

You would just simply install the latest babel packages (looks like you were trying to install the old ones). Here's a few steps:

  • Install needed packages:
npm i -D @babel/core @babel/cli @babel/preset-env @babel/preset-react
  • Run your test jsx file:
npx babel path/to/yourFile.jsx --presets=@babel/preset-env,@babel/preset-react
tmhao2005
  • 14,776
  • 2
  • 37
  • 44
  • This is very helpful, thanks. Note that if the OP only wants to transpile JSX, the `@babe/present-env` seems to be unnecessary. – Garret Wilson Mar 20 '23 at 15:16