CODEWITHSUNDEEP
typescriptbabeljscreate-react-appreact-typescript
Jasmohan Singh
Jasmohan Singh

Reputation: 61

How to convert a React Typescript project to Javascript ES5

I have a react typescript project. And I need to convert the source code (NOT THE BUILD) to ES3 or ES5 Js. Because I want to use this code as a component in another react app.

Can you please suggest which preset and plugins to use to do the job?

I have tried the combination of the following babel presets and plugins

 "presets": [
  "@babel/preset-env",
  "@babel/preset-react",
  "@babel/preset-typescript",
  "@babel/preset-flow"
],
"plugins": [
  "@babel/plugin-proposal-class-properties",
  "@babel/plugin-proposal-optional-chaining",
  "@babel/plugin-transform-typescript"
],

Earlier I my project was plain reactJs without typescript and at that time I was able to transpile using following combination.

 "presets": [
  "@babel/preset-react"
],
"plugins": [
  "@babel/plugin-proposal-class-properties",
  "@babel/plugin-proposal-optional-chaining",
],

Kindly provide a solution to convert ReactJs + Typescript source code to es3/es5 js.

Upvotes: 0

Views: 3324

Answers (2)

Shivakumar Doddamani
Shivakumar Doddamani

Reputation: 1

The only turnaround that I'm currently using is to just rename App.tsx to App.js and add your own Javascript code to App.js

Upvotes: 0

basarat
basarat

Reputation: 276363

And I need to convert the source code (NOT THE BUILD) to ES3 or ES5 Js

If you want to Upgrade the src to TS you are best to do it by hand gradually. That said ES3 is valid TypeScript!. To enable TypeScript to use .js files you can enable the allowjs compiler option in tsconfig.json. Official docs on allowJs can be found here: https://www.typescriptlang.org/tsconfig#allowJs

If you want to compile TS to JavaScript then "@babel/preset-typescript", is exactly what you need. For finer control you can use options based on target : https://babeljs.io/docs/en/babel-preset-env#targets

Upvotes: 2

Related Questions