我在构建 JS 库时学到的东西

如果您称自己为开发人员，但您还没有创建任何库或想过要构建一个库，那么我的朋友，您还没有触及开发人员的皮毛。

在个人项目或公司项目中，你一定想过围绕那些重复构建的函数或组件创建一个库。根据 DRY（不要重复自己）原则，这也很合理。但是，要开发出一个既有用又能被他人使用的东西，需要付出很多努力。

构建一个库不仅仅是将一些灵活且动态的函数或组件捆绑在一起。这其中有很多思考，比如

• API - 简单易用的功能，编辑器中带有 IntelliSense
• 捆绑- 将所有内容整合到一个或多个包中，以便您和您的团队轻松使用。
• 版本控制- 用于发布和版本化软件包的工具
• 测试- 检查是否存在任何重大更改以及应用程序是否正常运行。您可以创建一个测试应用，在发布新版本之前部署更改，以检查一切是否正常。或者，您也可以简单地使用 Jest 或 Playwright 测试，通过自动化方式在 CI/CD 工作流中检查更改是否正常。

然后在 JS 世界中，你还必须弄清楚

• 摇树
• 副作用
• ESM 或 CJS
• 代码分割
• 捆绑依赖项
• 开发依赖项
• 对等依赖关系
• 出口
• 模块
• 类型（.d.ts 文件）
• JS 文档或 TS 文档
• 以及更多...

这些内容可能看起来让你不知所措，但了解这些内容对你的职业生涯以及作为一名开发人员来说都至关重要。我不会在本文中深入探讨这些内容，也许以后会讲，但互联网上有很多关于这些内容的精彩文章。

然而，所有这些问题都可以通过 Rollup、Vite 和 Webpack 等打包工具来解决。了解所需的配置以及工作原理才是关键所在。正因如此，Nextjs 使用预先配置好的 Webpack 来处理其应用程序的所有打包工作，这样你就无需自己动手了。

最近，他们还在开发一款新的打包工具 Turbopack，它是用 Rust 编写的。我记得他们声称它向后兼容 Webpack，但它目前仍处于 alpha 测试阶段，所以我们还有待观察。Vite 也在开发 Rolldown，一个基于 Rust 的 Rollup 版本。只要你还在 Vite 的生态系统中，这些更新和变化对你来说可能没什么意义。

作为一名 JS 开发者，或者说任何开发者，你应该知道如何在无需任何设置工具的情况下搭建一个环境。这些工具对于启动新项目非常有用，但一旦你需要生态系统之外的东西，你就会陷入困境。

解答 Leet Code 题目或任何类型的竞赛题都能帮助你理解核心的编程概念。而构建一个库并对其进行迭代，则能帮助你理解编程语言的概念，因为不同的语言可能拥有相同的关键字或函数，例如 while 循环、for 循环、变量声明等等。但它们的内部工作原理和性能会有所不同，而了解这些正是你成为该语言专家的方法。这样，你就能发现你的函数或应用程序在速度或性能方面可能存在哪些问题。

这适用于任何编程语言，而不仅仅是 JS。最好的部分是，你会开始熟悉所有工具，并在使用它们时更加得心应手。这将使你能够更快、更高效地构建应用程序。

构建一个生产环境的应用程序或库并非易事。而你在独立构建过程中所获得的经验远比仅仅观看 YouTube 视频或学习教程要丰富得多。

作为一名经验丰富的开发人员，我也犯过很多错误。有时会出现配置错误和各种 bug，有时部署前没有进行适当的测试，有时文档网站无法正常运行。如果库具有集成功能，那么它可能无法正常工作，诸如此类的问题还有很多。

问题是错误会发生，这就是学习的目的，这样下次就不会再发生。如果您使用像nextjs或nuxtjs这样的工具，那么您需要构建类似这样的东西。因为这些工具是为了帮助开发人员构建应用程序而构建的，而不是像 Rollup 或 Webpack 配置那样陷入设置中。是的，这些工具很棒，可以为您完成大部分工作，但大型生产应用程序不仅仅是nextjs或nuxtjs ，它们包含许多基于Python（可能用于 AI）和React （管理面板）构建的中小型库和应用程序。然后就需要 monorepo 了，但您可能不知道什么是 monorepo，因为您从未脱离过这些生态系统。

您可以参考这篇文章《构建组件库时我学到的东西》，其中我更详细地介绍了我和我的团队用于构建应用程序的工具和库。

结论

我学到了很多东西。从构建更好的 API 和函数，到创建库并将它们发布到 npm。我花了 6 个月的时间才完成这一切。我知道这听起来很耗时，但我从中获得了乐趣。构建这个项目让我深入了解了如何构建一个其他人也能使用并珍视的库。

我想说，如果你还没建过图书馆，至少应该尝试一下。社区会给你很大的帮助，如果你遇到瓶颈，有人能帮你，或者你也遇到过同样的问题，你就可以在此基础上继续探索。

Github、StackOverflow 和其他在线表格是寻求与您的问题相关的帮助和指导的好地方。

如果你想查看我的图书馆，我从中获得了所有的学习成果，这里有链接 -

@rafty/用户界面

GitHub - github.com/rhinobase/raftyui
文档 - rafty.rhinobase.io

请告诉我你的想法，以及我们未来如何推动社区发展。请给我们一个星标，以表达你的支持，并期待未来我们能提供更多类似的内容。