How to publish typescript ReactJS component on npm?

Viewed 1041

I would like to make a new ReactJS component with Typescript and publish it on npm. My idea is to have only a project folder with:

  • /dist build for final distribution on npm
  • node_modules
  • /public where I will have my index.js to locally run my app for development purposes and one folder components where all files for my distributed component will be stored (only component folder will be published)
  • and other files like .gitignore, .npmignore, package.json and so on..

Something like this:

Folder tree

I have seen many guides (and spent many hours) figuring out how to publish a ReactJS component like:

But most of them have such a complicated structure (like script files, babel files, webpacks ..) and generated files that I don't understand.

My idea was to use react-script to run and develop the app locally and then run tsc to compile my component to build. I thought that I don't need create-react-app/library, babel or webpack to publish a react component - if they are necessary, why do we need them? I just thought it should be possible to do it simply and lightly - like just to take tsx files compile them into js..

To me, it seems that the process of publishing a ReactJS component library with TS to npm is not that well documented. Can you please provide steps or some well and easy-to-understand guide on how to publish react component? Also with all the configurations (configuration files), since I think I messed it somewhere there.

Thanks in advance!

0 Answers
Related