发布于 2026-01-06 3 阅读
0

Published my first NPM package - here's what I learned Gatsby Omni Font Loader v2 Open-source mindset NPM best practices High-quality, informative docs Bug reports & contribution What to do if the package doesn't get any traction? Conclusion

我发布了我的第一个 NPM 包——以下是我的心得体会

Gatsby Omni Font Loader v2

开源思维

NPM最佳实践

高质量、信息丰富的文档

错误报告和贡献

如果推广方案没有获得任何反响怎么办?

结论

两周前,我发布了我的Gatsby 插件,并将其打包成 NPM 包。简而言之,我注意到 Gatsby 的字体加载插件已经过时、功能不全,所以我开发了一个插件,如果它能获得成功,我愿意积极维护它。你可以在我之前的文章中了解更多详情。

在那两周里,我的软件包获得了近 800 次下载。我从中汲取了一些关于发布自己的 NPM 软件包和维护开源项目的经验教训,想在这篇文章中与大家分享。

GitHub 标志 codeAdrian / gatsby-omni-font-loader

字体加载器针对性能进行了优化。它移除了阻塞渲染的字体资源,并异步加载它们。通过字体加载状态监视器处理 FOUT 和 FOUC 问题。同时支持本地字体和 Web 字体。

Omni字体加载器标志

Gatsby Omni Font Loader v2

  • 向 Gatsby 项目添加 Web 字体或自定义字体的简单方法
  • 可以启用高性能异步字体加载。
  • 可以启用字体加载监听器。
  • 未样式文本闪烁 (FOUT) 处理支持





特征

  • 支持网页字体和自托管字体
  • 预加载文件并预连接到 URL
  • 异步加载字体以避免渲染阻塞。
  • 采用快速加载代码片段实现
  • 正在加载状态监听器以避免 FOUT
  • 尺寸小巧,占地面积小

安装

npm install gatsby-omni-font-loader react-helmet

或者

yarn add gatsby-omni-font-loader react-helmet

配置

将以下代码片段添加到gatsby-config.jsplugins 数组中。

{
  /* Include plugin */
  resolve: "gatsby-omni-font-loader",
  /* Plugin options */
  options: {

    /* Font loading mode */
    mode: "async",

    /* Enable font loading listener to handle FOUT */
    enableListener: true,

    /* Preconnect URL-s. This example is for Google Fonts */
    preconnect: ["https://fonts.gstatic.com"],

    /* Self-hosted fonts
Enter fullscreen mode Exit fullscreen mode

开源思维

你是否开发出了实用、可复用且制作精良的产品?为什么不把它发布成 NPM 包呢?

考虑将你希望开箱即用的 NPM 包开源并发布。因为很可能还有很多开发者会觉得这段代码有用。

但是,如果您决定发布该软件包,也应该记住您需要维护它。如果该软件包在社区中获得认可,您可能会收到一些问题报告、功能请求和合并请求。

目前,我们还是把重点放在发布软件包上吧。

NPM最佳实践

我在大约一年前写的文章中概述了一些 NPM 最佳实践。

这对你的 NPM 包意味着什么?

  • 请确保依赖包保持最新状态,以避免漏洞。
  • 解决所有已报告的问题
  • 积极与发布问题、功能请求、疑问等的用户互动。
  • 保持软件包和代码的优化
  • 让社区了解您的方案为何优于竞争对手。

替代文字

如果您的仓库包含任何漏洞,GitHub 会发出警报。

替代文字

它甚至会自动创建修复程序的 PR。

高质量、信息丰富的文档

你需要提供内容丰富的文档,以便社区了解你的 NPM 包的功能、他们为什么需要它以及如何使用它。

文档通常可以添加到README.md代码仓库中,它们通常包含以下内容:

  • 包装简述
  • 如何安装它
  • 最简单的使用场景
  • 可用的配置选项
  • 示例和进阶技巧
  • 常见问题解答或故障排除(避免重复提问或与您的 NPM 包无关的问题)

错误报告和贡献

当开发者下载和使用你的 npm 包时,他们不可避免地会发现、提出功能请求、发送拉取请求或提出问题。

维护健康的用户群体并与用户互动是保持 NPM 包持续运行和使用的最佳方式。没有人喜欢看到一个 NPM 包有 10 个或更多未解决的问题,却几周都没有人回复。这会让用户对你的包失去兴趣。

如果推广方案没有获得任何反响怎么办?

截至本文撰写之时,NPM 上共有 1,445,808 个软件包。因此,如果你的软件包无人问津或使用率不高,也不足为奇。可以肯定的是,无论你开发什么软件包,至少都有十几个替代方案,所以拥有一些突出的功能至关重要。

但如果推广活动没有获得任何反响怎么办?你可以选择:

  • 广而告之——在社交媒体、开发者论坛和频道上分享,撰写文章,改进文档,请同事试用……
  • 弃用它
  • 将所有权转让给愿意继续你工作的人

如果你的软件包有依赖项,你肯定不希望它存在安全漏洞,所以如果你决定不再维护它,最好将其弃用。

结论

发布 NPM 包并非一劳永逸。你的依赖项可能过时,从而导致安全问题;用户也可能会提出问题、报告错误、提交 pull request 等等。

如果您要发布软件包,请确保您随时准备好与用户互动,并确保依赖项是最新的。


这些文章都是靠咖啡支撑着写出来的。所以,如果您喜欢我的作品并觉得它有用,不妨请我喝杯咖啡吧!我将不胜感激。

请我喝杯咖啡

感谢您抽出时间阅读这篇文章。如果您觉得有用,请点赞❤️或🦄,分享并留言。

文章来源:https://dev.to/adrianbdesigns/published-my-first-npm-package-here-s-what-i-learned-49j6