Manually Transpiling React JSX with Babel-cli

0
votes

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.

1
reactjsbabeljsjsxbabel-clibabel-core
I believe it should just be babel, not babel-cli babeljs.io/docs/en/babel-cli#compile-files - Jayce444
@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
Can you share your package.json as well? I need to see all your babel versions (including presets/plugins) - tmhao2005
@tmhao2005 I don't have any package file. I don't know much about this. I've been using create-react-app. - abdullahQureshee
Ah I see. But you should install babel things locally at your project. Try to install them and try again. - tmhao2005

1 Answers

1
votes

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