当前位置: 首页 > 网络应用技术

五分钟学习将React组件释放到NPM包装

时间:2023-03-07 01:53:32 网络应用技术

  最近,只能移动需要拖动,可设置和在指定范围内的项目。在转动一些组件后,我发现需要三种满意度,并且插件中需要定制需求。几乎没有??:

  写作后,我突然认为我可以将其放在NPM库中。将来维护组件更加方便。因此,在五月假期的时候,我终于发布了袋子?

  发布NPM时,您会踩一些坑。例如,在脚手架打包后,TS提示消失,例如NPM的官方来源被HTTPS代替,以使包装失败和其他导致整个过程非常不舒服的因素。

  为了避免将来继续踏上同一坑,它也可能会帮助其他人节省一些时间,因此可以使用此博客。

  然后,此博客适合您,大约五分钟。

  这是主题。

  React+TypeScript实施的组件需要在要引入的包装工具的帮助下包装。检查了一些信息后,我发现有三个工具:

  这三个工具是用于包装工具的预设,例如DUMI,TSDX,基本上实现了0个配置。我们只有必需品

  它很少维护,所以我没有尝试过。

  TSDX和DUMI带给我的经验并不多,最重要的发行实际上是编写文档。这两个工具都有相应的文档工具。TSDX是在故事书中构建的。我写的第一个组件库已使用。匹配插件?非常困难

  我使用了我使用的TSDX,但发现了一些问题:

  问题一:

  我的组件在测试时无法触发TS提示,然后我发现它需要包装需求的说明:

  变成:

  我的组件可以具有一种提示。

  问题2:

  修改了TSDX中组件的源代码后,您需要手动打包它,然后在示例文件夹和文件夹中删除文件以生成一个新的Dist目录以使其有效。换句话说,似乎有一个问题?

  所以我尝试了。杜米(Dumi)编写文档的方式对我来说比TSDX的故事书更方便,但它也有一些缺陷:

  即使在编写组件演示时正式推荐的插件-in,也没有API智能提示,也只能提示是否存在语法错误等。

  这种缺陷使得在使用组件时无法知道其他人何时使用组件。(自动提示道具非常重要!!)

  但是最后,我发现了解决此问题的方法,即[本地测试组件]中的方法。

  结果,包装在DUMI中的组件仍然是类型提示。我不需要手动更改DIST目录。

  我的组件文档的主页当前是这样的:

  它基本上满足了我的需求,所以让我们谈谈如何使用Dumi的发布过程。

  如何在这里使用Dumi不会说太多,只需查看官方文档即可。让我谈谈我在这里遇到的问题和解决方案:

  ON:PUSH:分支:

  作业:部署:运行:Ubuntu-18.04步骤:

  官方写作如下:

  有效的写作:

  你看到差异吗?还有什么?

  来自'https://www.shouxicto.com/article/reaeact-drag- resizable'的导出{默认为dragResizablebox};

  。

  请注意,最后一个是您在Github仓库中设置的令牌名称。

  最好在软件包之前对其进行测试。由于编写文档时的提示不正确,因此我们不能进行全面的测试。

  因此,在此处运行命令以在全局node_modules下创建一个软链接。您将获得一串字符

  然后在项目根目录中创建一个目录以编写测试用例。

  在测试中创建,然后在测试目录XXXXXXX中运行测试目录的组件库,以便将其运行到全局情况。请注意,这里的修改是您自己的。

  然后,我们可以在其中介绍我们的组件。

  然后,您可以测试测试,例如如果有代码提示,则无法执行。

  这是一个GitHub高星项目,如何教人们如何编写读书文件并提供模板。

  地址在这里:标准阅读中文

  同时,我们可能还需要徽章。这是一个用于生成徽章的工具网站。您可以基于NPM或GitHub生成徽章。我们只需要复制为readme即可。

  徽章一代:https://shields.io/

  在README中生成徽章的示例代码:

  会这样:

  我们只需要复制代码并覆盖生成的链接即可删除此代码字符串上的链接。

  当您同时发布时,您也可以修改其他内容,但不要更改名称。

  宣传我长期维持的GitHub博客

  1.从学习到摘要,记录前端的重要知识点,涉及-Depth,HTTP协议,数据结构和算法中的JavaScript,浏览器原理,ES6,Front -End -End -End技能和其他内容。

  2. README中有一个目录可以找到相关的知识点。

  如果您对您有帮助,请欢迎参观明星并关注。

  结束,撒花?ヽ(°▽°)ノ?

  #是时候构建团队的UI组件库

  #github动作

  #使用Typescript + React将组件发布到NPM