时间戳

首页 > 解决方案 > 如何发布 react+typescript 组件

reactjs - 如何发布 react+typescript 组件

问题描述

我正在尝试发布一个用 Typescript 编写的 React 组件，但我对什么是最好的方法有一些疑问

我的工作区：

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

- 要将其发布到包管理器（npm）
，我创建了一个 tsconfig 文件：“declarations”：true、“module”：“commonjs”、“target”：“es5”、“jsx”：“react”
然后运行tsc && npx copyfiles -F -u 2 \"src/lib/**/*.svg\" \"src/lib/**/*.css\" dist 它生成一个具有相同结构但包含 .js 文件和 d.ts 文件的文件夹
我的输出：

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

这是通往它的路吗？或者有一个最好的方法来解决这个问题？我阅读并看到了很多帖子和答案，说要走的路是使用 webpack，但我无法生成定义 .d.ts 文件。并且还使用 webpack，它将捆绑 react 和 react-dom 并使捆绑包更重，对吗？还是我错了？

- 要在 html 文件中使用它，如下所示：https
://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 另外我想知道我是否想直接在 html 文件中使用我的组件，使用脚本标签导入 react 和 react-dom ，如何捆绑包括图像和 css 文件在内的所有内容？

标签： reactjstypescriptnpmwebpackpackage

解决方案

听起来您对这个项目的帮助太大了，但是 create-react-library npm 包为您完成了所有设置（包括打字稿）以将反应组件发布到 npm。如果您只有一个组件，则传输时间不会太长。

推荐阅读