如何发布 react+typescript 组件

Question

I'm trying to publish a React component written with Typescript and I have some doubts about what is the best way

my workspace:

./src
   index.tsx
   styles.module.css
   logo.svg
   SubcomponentFolder
       index.tsx
       styles.module.css

-To publish it to a package manager (npm)
I create a tsconfig file with: "declarations":true, "module": "commonjs", "target":"es5", "jsx": "react"
Then run tsc && npx copyfiles -F -u 2 \\"src/lib/**/*.svg\\" \\"src/lib/**/*.css\\" dist this generates a folder with the same structure but with the .js files and d.ts files
my output:

./dist
   index.js
   index.d.ts
   styles.module.css
   logo.svg
   SubcomponentFolder
       index.js
       index.d.ts
       styles.module.css

Is this the way to it? Or there's a best way to approach that? I readed and saw a lot of posts and answers saying that the way to go is using webpack, but I can't generate the definitions .d.ts files. And also using webpack, it will bundle react and react-dom and will make the bundle heavier right? Or am I wrong?

-To use it in html file, like this: https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605
Also I'm wondering if I want to use my component directly in an html file importing react and react-dom using script tag, how can I bundle everything including images and css files?

Answer 1

It sound like you're a little far into this project for this to help too much, but the create-react-library npm package does all the setup for you (including typescript) to publish react components to npm. If you only have one component it shouldn't take too long to transfer over.