皮皮网

1.8个好用的开源开发工具
2.前10大开源开发工具
3.bit.dev和storybook的区别
4.Storybook vue2组件库搭建到 npm 发布入门篇
5.五分钟学会发布React组件到NPM包

8个好用的开源开发工具

       开源开发工具在软件开发过程中扮演着重要角色。选择合适的工具是确保工作顺利进行、达到最终期限、发现并解决问题的关键。下面将介绍8个顶级开源开发工具，它们在年被开发者广泛使用。任务清单网页源码

       VS Code是一款轻量级但功能强大的源代码编辑器，支持多种编程语言，包括JavaScript、TypeScript、Node.js等。它具有丰富的扩展生态系统，可为不同语言提供强大的支持。

       Budibase是一个低代码平台，允许用户快速创建内部工具和自定义业务应用程序。它将数据和流程整合在一起，支持自动化任务，提供更好的用户体验。

       Snyk是一个开发者优先的安全平台，专注于云原生应用的安全构建。它能帮助开发人员在开发过程中缓解开源漏洞，提供自动修复功能和依赖关系可视化。

       PostHog是一个产品分析平台，适合大型企业使用，能提供广泛的监控工具来增强产品功能。它能集成到基础架构中，提供会话记录、热图和功能标志等功能。

       Prisma是一个开源的下一代ORM，包括Prisma Studio、Prisma Client和Prisma Migrate。它的类型安全API使得前端和后端开发更加直观和易于维护。

       GitLab是一款全面覆盖软件开发过程的DevOps工具。它能显著提升工作流程效率，加速软件创建速度，棋类源码源码提供代码分析、服务台、设计管理和时间跟踪等功能。

       Storybook是一个UI开发工具，通过隔离组件实现快速、高效的开发流程。它支持多种前端框架，提供组件展示环境，帮助开发者更好地理解和使用组件。

       Supabase是开源的Firebase替代品，提供身份验证、存储等多功能服务。其开源特性避免了Firebase API调用的费用问题，受到开发者欢迎。

       以上工具的使用将极大地提升开发效率，优化工作流程。但需要注意的是，部分工具可能需要使用梯子，因此在选择时需谨慎。

前大开源开发工具

       Visual Studio Code 是一款强大的开源源代码编辑器，适用于 Windows、macOS 和 Linux。它内置了对多种语言，如 JavaScript、TypeScript、Node.js 的支持，并提供了丰富的扩展生态系统，适用于其他语言，如 C++、C#、Java、Python、PHP、Go。源码网址源码其轻量级的设计和功能的丰富性使其在我们的前名中位居榜首。由于其在功能、用户体验和扩展方面的卓越表现，以及团队定期发布的更新，VS Code 成为了最佳编辑器之一，值得一试。

       Budibase 是一款开源低代码平台，为构建内部工具和自定义业务应用程序提供了一切所需，如仪表板、管理面板、审批应用程序、客户门户等。它允许用户在几分钟内将数据和流程转变为强大的内部工具。Budibase 在竞争中脱颖而出的原因包括用户可以在自己的基础设施上自行托管应用程序，创建内部和外部工具，以及自动化任务，如电子邮件通知、触发 webhook、发送报告等。此外，Budibase 导出的单页应用程序提供了更好的用户体验。

       Vercel 是一款面向前端开发人员的部署和协作平台，为他们提供了构建高性能网站和应用程序的综合工具。Vercel 使开发人员能够托管可即时部署和自动扩展的网站和 Web 服务，无需任何配置。其愉快的用户体验、高性能和 UI 设计是 Vercel 在前名中的原因之一。此外，它在 Github 上拥有最大和发展最快的社区之一，活跃和热情的论坛为用户提供了支持。

       Oh My Zsh 是一个开源的、社区驱动的框架，用于管理 Zsh 配置。它捆绑了超过 个插件，react源码源码简化了软件开发人员的工作。Oh My Zsh 为命令行使用人员提供了更丰富的体验，并定期更新和发布开源开发工具的新功能。用户可以访问社区贡献的主题，以获取最新功能和改进。

       GitLab 是一个集成的软件开发平台，旨在简化 DevOps 生命周期。它提供了从版本控制到服务台、设计管理、机密管理和时间跟踪的一系列工具。GitLab 的强大之处在于它在包管理方面的功能，允许团队轻松打包依赖项、管理容器和构建工件。此外，GitLab 的私有、容器和包注册表功能开箱即用，与 GitLab 的源代码管理和 CI/CD 管道无缝协作。这使得 GitLab 成为开源开发者世界中的重要平台。

       Supabase 是一个开源的 Firebase 替代品，为开发者提供了一个“一套开源工具，组合在一起以构建无缝的开发人员体验”。它包含许多功能，如身份验证、存储和即将发布的功能。Supabase 的闭源竞争对手 Firebase 的 API 调用费用使许多开发者转向 Supabase，因为它提供了更经济的解决方案。

       PostHog 是一款企业级产品分析平台，提供了不同的工具，旨在帮助企业更好地了解产品成功的关键因素。PostHog 提供了会话记录、热图和功能标志等功能，这些功能在产品分析领域是独一无二的。PostHog 的社区和团队反应迅速，乐于助人，cevb源码源码为用户提供支持和帮助。

       Snyk 是一款开发者优先的安全平台，旨在安全地构建云原生应用程序，并鼓励开发人员在开发过程中修复开源漏洞。Snyk 的优势在于其自动化的安全漏洞修复功能和对软件组合分析的简化，使开发过程更加高效和安全。

       Prisma 是一个开源的下一代 ORM，提供了一个全面的解决方案，包括 Prisma Client、Prisma Migrate 和 Prisma Studio。Prisma 提供了一个将数据库转化为 REST/GraphQL API 的 ORM，为前端和后端开发提供了类型安全的 API。它采用的 SDL 优先方法使构建过程更加直观和高效。

       Storybook 是一款 UI 开发工具，通过隔离组件简化了开发过程。它允许开发人员专注于单个组件的开发，而无需启动复杂的开发堆栈、输入特定数据或在应用程序中导航。Storybook 与各种流行的前端框架（如 React、Vue 和 Svelte）集成，并提供了丰富的社区支持。它还支持组件的可视化展示，使开发人员更深入地了解可用组件，减少了重复工作。

bit.dev和storybook的区别

       åŒºåˆ«ï¼š

       Storybook 是一个 ui 组件开发管理的工具，我们可以通过 story 独立创建组件，并且每个组件都有一个独立开发调试环境。Storybook 是运行在主应用程序之外，不依赖于项目，因此我们不必担心开发环境、依赖等问题导致不能开发组件；

       bit是一种类似于npm的包/组件公共库。由于npm发布的资源、数据全部都是公开的，所以对项目的部分源代码并不适用。同时，bit提供了私有集合，私有集合与公开集合的使用并无任何区别，但是只有管理者（master）与受邀请的开发者（developer）能使用。bit允许每个用户创建一个免费的私有集合。

Storybook vue2组件库搭建到 npm 发布入门篇

       Storybook 是一个强大的前端开发工具，专为组件管理和测试设计。它帮助开发者以交互方式构建、测试和展示组件，提供独立的页面，便于快速展示和调试。以下是使用Storybook进行组件库搭建到npm发布的基本步骤：

       1. 安装和初始化项目

       使用Node ..0和npm 8..4，可通过`npx -p @storybook/cli sb init --type vue`快速创建Vue 2版本的项目。然后，使用Vue CLI创建`vue2-storybook-module`。

       2. 启动和打包组件

       进入项目，关联git仓库，安装Storybook。接下来，封装组件并注册，官网示例可以直接使用。记得修改`package.json`以配置打包，生成的`my-storybook-ui`文件夹存放打包后的组件。

       3. 发布到npm

       在`my-storybook-ui`目录下，初始化`package.json`，并切换到npm官方源。如果已有账号，通过命令行发布，检查包名是否冲突。发布成功后，可在npm官网上查看你的包。

       4. 在项目中使用组件

       在`main.js`中全局注册组件，启动项目后，其他开发者即可通过npm安装和使用你的组件库。

       源码及更多详细信息可在以下链接找到：

       源码：github.com/you-hei-mi/v...

       组件地址：my-storybook-ui - npm (npmjs.com)

       组件文档：Configure your project - Docs ⋅ Storybook

五分钟学会发布React组件到NPM包

       前言

       最近在做的项目需要实现一个可拖拽、可设置大小、并且在指定范围内才可以移动的需求，在翻了一些组件后，发现需要三样都满足,并且能满足项目定制化需要的插件几乎没有~，于是自己动手实现了该插件，整体效果如下：

       在写完之后，突然想到可以放到NPM库中，以后维护该组件更加方便版本管理，于是趁五一长假，终于将包发布上去了~

       文档地址

       NPM包地址

GitHub主页

       在发布NPM时踩了一些坑，比如脚手架打包后TS提示消失、比如NPM的官方源换成了HTTPS让发包失败等等因素导致整个过程非常不顺。

       为了避免自己未来继续踩同样的坑，或许同时还能够帮助别人节省一点时间，于是才有了这篇博客。

       如果你希望未来想用React+TypeScript完成一个组件库并发布到NPM

       如果你想了解我在发布时踩了哪些坑

       那么这篇博客适合你，阅读时长大约五分钟。

       下面是正题。

脚手架工具

       采用React+TypeScript实现的组件需要借助打包工具将代码打包好才能够被引入，我在查了一些资料后发现有以下三款工具：

       TSDX

       create-react-library

       dumi

       这三款工具都预设好了打包工具，比如dumi用的webpack、tsdx用的parcel,而且也基本实现了0配置，我们只需要根据官方文档就可以很快地完成组件编写、用例测试、打包等环节。

       其中create-react-library已经很少维护了，所以我没试过它。

       tsdx和dumi带给我的体验差不太多，而且发布最重要的其实是写文档，两款工具都有对应的文档工具，tsdx内置的是storybook，我写的第一个组件库就是用的它，但是实在太难配插件了~

tsdx的问题

       一开始我用的tsdx，但是发现几个问题：

       问题一：

       我的组件在测试用例时，无法触发ts的提示，然后我发现它打包后的声明文件中需要将：

import?react?from?'react'

       修改成：

import?*?as?react?from?'react

       我的组件才能够有类型提示。

       问题二：

       tsdx中修改组件源代码后，需要手动再次打包，然后删掉example文件夹内的node_modules文件以及.parcel_cache文件夹生成新的dist目录，才会有效果。换言之它的watch模式貌似有问题？

dumi的问题

       于是我试了一下dumi,dumi写文档的方式对我而言要比tsdx的storybook方便,不过它也有一点缺陷：

       即使用了官方推荐的ts-in-markdown插件，在写组件demo时，也是没有api智能提示的，只能提示有没有语法错误之类的。

       这个缺陷就使得写demo时没有办法知道当别人用你的组件时，有没有代码自动提示。（自动提示props真的很重要啊！！）

       不过最终我找到了解决这个问题的方法，方法在本地测试组件。

我最终选择dumi

       从结果来说使用dumi打包完的组件还是有类型提示的，不需要我手动改dist目录。

       我的组件文档首页目前是这样的：

       基本满足了我的需求，所以下面讲讲如何使用dumi的发布过程。

一些微不足道的经验

       如何使用dumi这里就不多说，看官方文档就好，我在这里讲一下我遇到的问题以及解决方法：

       当组件的props类型与外部引入的组件的props类型合并后，写API时会默认将所有props的api都展示出来。

       这一点我们需要在.umirc.ts中配置apiParser:

apiParser:?{ ?propFilter:?{ //?是否忽略从?node_modules?继承的属性，默认值为?falseskipNodeModules:?true,//?需要忽略的属性名列表，默认为空数组skipPropsWithName:?[],//?是否忽略没有文档说明的属性，默认值为?falseskipPropsWithoutDoc:?false,?},},

       当配置publicPath或base后，如果logo和favicon用的本地，一定要在前面加上publicPath或base的路径。

favicon:?'/react-drag-resizable/lightbulb.png',logo:?'/react-drag-resizable/lightbulb.png',base:?'/react-drag-resizable/',publicPath:?'/react-drag-resizable/',

       否则部署后logo和favicon的会引入失败。（这点在开发环境下发现不了）

       dumi官方给的github-pages-action自动部署的yml文件有问题官方给的yml文件是这样写的：

name:?github?pages

       on:push:branches:

       master#defaultbranch这里有问题，需要改成main

       main#这才是正确的

       jobs:deploy:runs-on:ubuntu-.steps:

       uses:actions/checkout@v2

       run:npminstall

       run:npmrundocs:build

       name:Deployuses:peaceiris/actions-gh-pages@v3with:github_token:${ { secrets.GITHUB_TOKEN}}publish_dir:./docs-dist

       官方给的自定义导航、分组和标题写法有问题

       官方写法如下：

---title:?自定义页面名称nav:?path:?/自定义导航路由?title:?自定义导航名称?order:?控制导航顺序，数字越小越靠前，默认以路径长度和字典序排序group:?path:?/自定义分组路由，注意，分组路由?=?导航路由?+?自己?title:?自定义分组名称?order:?控制分组顺序，数字越小越靠前，默认以路径长度和字典序排序---

       有效的写法：

---title:?自定义页面名称nav:path:?/自定义导航路由title:?自定义导航名称order:?控制导航顺序，数字越小越靠前，默认以路径长度和字典序排序group:path:?/自定义分组路由，注意，分组路由?=?导航路由?+?自己title:?自定义分组名称order:?控制分组顺序，数字越小越靠前，默认以路径长度和字典序排序---

       看出差别了吗？?

       已经将必要的模块导出，但写docs时引入该模块依然报错比如我已经在src/index.ts中导出组件内的类型声明和导出组件了：

export?type?{ ?RectProps,?DragResizableBoxProps?}?from?'./react-drag-resizable';

       export{ defaultasDragResizableBox}from'./react-drag-resizable';

但是在写?doc?时，正常引入`RectProps`，还是报错了。执行`npm?run?build`打包出一个?dist?文件夹，然后重启?vscode?解决。#?使用github-actions自动化部署我们可以使用?github-actions?自动化将?dumi?的组件文档部署到?github-pages?中，实现步骤如下：1.?在?github?建一个代码仓库2.?到github?的个人主页申请一个?token3.?选择token?的?note和过期时间4.?权限选择5.?最后生成?token，将token?复制到你的个人仓库的?`setting/secrets`?中我在这里使用的是?`ACCESS_TOKEN`,也可以自己写，不过这里的名字需要跟后面的?yml?文件保持一致。6.?在你的项目根目录中创建目录和?yml?文件

       .github└──workflows└──gh-pages.yml

yml文件中这样写```ymlname:?github?pageson:?push:branches:?-?main?#?default?branchjobs:?deploy:runs-on:?ubuntu-.steps:?-?uses:?actions/checkout@v2?-?run:?npm?install?-?run:?npm?run?docs:build?-?name:?Deployuses:?peaceiris/actions-gh-pages@v3with:?github_token:?${ { ?secrets.ACCESS_TOKEN?}}?publish_dir:?./docs-dist

       注意最后的secrets.ACCESS_TOKEN里面的ACCESS_TOKEN就是你在github仓库中设置的token名字。

       在项目的package.json中配置homepage字段

import?*?as?react?from?'react1

       将代码推送到远程仓库，actions会自动下载依赖并打包

       最后打开你配置的homepage就可以看到部署好的文档，我的文档地址是这样的

       /中注册一个账号

       package.json中配置一些内容

import?*?as?react?from?'react4

       上面的配置是我收集到的，如果不是非常特殊的情况，我们只需要将name、description、author、version、keywords、homepage、repository修改成自己的就可以了，其他可以不动。

       修改README一个NPM包，好的README能够快速让用户知道这个包能够干什么，如何使用等。

       这里有一个github高star的项目，教人怎么写README，并提供了模板。

       地址在这：standard-readme中文

       同时我们可能还需要徽章，这里有一个徽章生成的工具网站，可以根据NPM或者github来生成徽章，我们只需要拷贝到README就可以生成徽章

       徽章生成：https://shields.io/

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

import?*?as?react?from?'react5

       会变成这样：

       我们只需要拷贝代码，并将生成的链接覆盖掉这串代码上的链接就行

       在项目中输入命令行发布登陆npm，并根据提示输入注册时的username、password,email

import?*?as?react?from?'react6

       npm镜像源，记得还原为官方,官方的源已经换成了https协议了

import?*?as?react?from?'react7

       设置完了也可以再看一眼

import?*?as?react?from?'react8

       执行npm打包,此时会出来dist文件

import?*?as?react?from?'react9

       一般来说我们只需要将dist传到npm就行了，不需要传源码，这时候你可能需要再看一眼package.json中的files字段是不是设置正确了

apiParser:?{ ?propFilter:?{ //?是否忽略从?node_modules?继承的属性，默认值为?falseskipNodeModules:?true,//?需要忽略的属性名列表，默认为空数组skipPropsWithName:?[],//?是否忽略没有文档说明的属性，默认值为?falseskipPropsWithoutDoc:?false,?},},0

       发包

apiParser:?{ ?propFilter:?{ //?是否忽略从?node_modules?继承的属性，默认值为?falseskipNodeModules:?true,//?需要忽略的属性名列表，默认为空数组skipPropsWithName:?[],//?是否忽略没有文档说明的属性，默认值为?falseskipPropsWithoutDoc:?false,?},},1

       后面更新包的代码时，需要同步更新包的版本，这个字段在package.json中

apiParser:?{ ?propFilter:?{ //?是否忽略从?node_modules?继承的属性，默认值为?falseskipNodeModules:?true,//?需要忽略的属性名列表，默认为空数组skipPropsWithName:?[],//?是否忽略没有文档说明的属性，默认值为?falseskipPropsWithoutDoc:?false,?},},2

       每次都需要跟上一次不一样，否则会发包失败。

       同时发包时，也可以修改其他package.json的内容，但不要改name噢。

最后

       推广一下本人长期维护的github博客

       1.从学习到总结，记录前端重要知识点，涉及Javascript深入、HTTP协议、数据结构和算法、浏览器原理、ES6、前端技巧等内容。

       2.在README中有目录可对应查找相关知识点。

       如果对您有帮助，欢迎star、follow。

       完结，撒花ヽ(°▽°)ノ?

参考

       #是时候搭建你们团队的UI组件库了

       #GitHubActions入门教程-阮一峰

       #使用TypeScript+React发布组件到Npm