如何保持一个大的下一个。js应用程序-柠檬ai自媒体

Nirmalya Ghosh 2021年11月26日0次评论如何保持一个大的下一个。js应用程序11分钟阅读应用程序，下一步。js、工具、Twitter上的TypeScript共享、LinkedIn关于作者“KDSP”的信息Nirmalya Ghosh是印度的一名开发人员。他喜欢解决复杂的技术问题，喜欢使用JavaScript。更多关于Nirmalya的信息↬

电子邮件时事通讯关于前端和用户体验的（精彩的）电子邮件“KDSP”每周提示。受到19万人的信任。

前端测试大师级扣人心弦的在线研讨会：交互式和实时免费开发人员测试帐户快速摘要入门↬ 在本文中，Nirmalya讨论了他在构建和维护大型Next时所面临的一些复杂问题。js应用程序。他总是解释如何使用各种工具解决这些问题。“KDSP”维护大型应用程序始终是一项困难的任务。它可能具有过时的依赖项，这可能会导致可维护性问题。它也可以有一些不可靠的测试，不能激发任何信心。大型JavaScript和CSS捆绑包也可能存在问题，导致应用程序为最终用户提供非最佳用户体验。

然而，有几种方法可以使大型代码库易于维护。在本文中，我们将讨论其中的一些技术，以及我希望早些时候知道的一些有助于管理大型企业的方法。js应用程序。

注意：虽然本文是针对下一篇文章的。js，其中一些要点也适用于各种前端应用程序。

使用TypeScript

TypeScript是一种强类型编程语言，这意味着它在混合不同类型的数据时强制执行一定的严格性。根据StAdvFultDebug开发者调查2021，TypeScript是开发者最想使用的语言之一。使用强类型语言（如TypeScript）的

在处理大型代码库时会有很大帮助。它将帮助您了解当发生更改时，您的应用程序是否有可能中断。当有可能损坏时，不能保证TypeScript总是会抱怨。然而，大多数情况下，即使在构建应用程序之前，TypeScript也会帮助您消除bug。在某些情况下，如果代码中存在类型不匹配，则生成将失败。js在构建时检查类型定义。

从下一个。js文档：

默认情况下，Next.js将作为下一个构建的一部分进行类型检查。我们建议在开发过程中使用代码编辑器类型检查“KDSP”请注意，下一个构建是创建下一个优化生产构建的脚本。js应用程序。从我个人的经验来看，当我尝试更新下一个时，它对我帮助很大。我的一个应用程序的js版本11。作为更新的一部分，我还决定更新其他几个包。因为有了TypeScript和VSCode，我甚至在构建应用程序之前就能够计算出这些突破性的更改是什么时候发生的。

在跳跃之后更多！继续阅读下面的内容↓ “KDSP”满足图像优化，Addy Osmani的全新实践指南，用于优化和在web上提供高质量图像。从格式和压缩到交付和维护：所有内容都在一本528页的书中。

跳转到目录↬ 使用Lerna或Nx的Mono-Repo结构

想象一下，您正在构建一个组件库以及下一个主组件库。js应用程序。您可能希望将库保存在一个单独的存储库中，以添加新组件、构建并将其作为一个包发布。当你想在图书馆工作时，这看起来很干净，也很好用。但当您想在下一个应用程序中集成库时。js应用程序，开发体验将受到影响。

这是因为当您将组件库与下一个组件库集成时。在js应用程序中，您可能必须返回库的存储库，进行更改，发布更新，然后在下一个应用程序中安装新版本。js应用程序。只有在那之后，新的ch组件库中的Ange将在下一个版本中开始反射。js应用程序。想象你的整个团队多次这样做。单独构建和发布组件库所花费的时间将累积成一大块。

如果使用组件库与下一个组件库所在的mono repo结构，则可以解决此问题。js应用程序。在这种情况下，您可以简单地更新组件库，它将立即反映在您的下一个组件库中。js应用程序。不需要单独构建和发布组件库。

您可以使用类似于next transfile modules的包，这样您甚至不需要在下一个transfile模块之前构建组件库。js应用程序可以使用它。但是，如果您计划将组件库作为npm包发布，则可能需要一个构建步骤。

“KDSP”用于管理mono repo，您可以使用诸如Lerna、Nx、Rush、Turborepo、Thread工作区或npm工作区之类的工具。当我需要配置构建管道时，我喜欢将Lerna与Thread工作区一起使用。如果您喜欢通过CLI自动化一系列事情，可以看看Nx。我觉得它们都很好，但解决的问题略有不同。

使用诸如Hygen之类的代码生成器来生成样板代码“kdsp”。当许多开发人员开始为一个大型代码库做出贡献时，很有可能会有大量重复代码。这主要是因为需要构建一个页面、组件或实用程序函数，该函数与现有函数类似，只需稍加修改。

您可以考虑为组件或实用程序函数编写单元测试用例。您可能希望尽可能多地复制样板代码，并根据新文件进行某些修改。但是，这会在代码库中添加大量由错误变量命名组成的代码。这可以通过适当的代码审查过程来减少。但是，有一种更好的方法可以通过自动化样板代码的生成来减少这种情况。

除非您使用的是Nx，否则您将需要一种方法来自动生成大量代码。我已经使用Hygen生成了Redux、React组件和实用程序函数的样板代码。您可以查看文档以开始使用Hygen。他们还有一个专门的部分用于生成Redux样板文件。您还可以使用Redux工具包来减少Redux应用程序所需的样板代码。我们下一步将讨论这个方案。

通过Redux Toolkit“KDSP”使用诸如Redux之类的成熟模式和较少的样板文件。许多开发人员会认为Redux增加了代码库的复杂性，或者React上下文更易于维护。我认为这主要取决于您正在构建的应用程序的类型以及整个开发团队的专业知识。您可以选择您的团队最满意的任何状态管理解决方案，但请尝试选择一个不需要太多样板文件的解决方案。在本文中，我提到Redux是因为根据npm趋势，它仍然是最流行的状态管理解决方案。对于Redux，您可以通过使用Redux工具包减少大量样板代码。这是一个非常固执己见且功能强大的库，可以用来简化状态管理。查看他们关于如何开始使用Redux工具包的文档。

在构建下一个时，我使用了Redux、Zustand和Redux工具包。js应用程序。我觉得Zustand非常简单易懂。然而，我仍然使用Redux，以防我需要构建复杂的东西。我没有使用XState，但它也是一个流行的选择。

使用React Query或SWR获取异步数据

大多数前端应用程序将从后端服务器获取数据并在页面上呈现。再过一会儿。无论是js应用程序还是任何JavaScript应用程序，都可以使用FetchAPI、Axios或类似的库来获取数据。但是，随着应用程序的增长，管理应用程序的这种异步状态变得非常困难你的数据。您可以使用Fetch或Axios周围的实用函数或包装来创建抽象，但是当多个开发人员在同一个应用程序上工作时，这些实用函数或包装将很快变得难以管理。您的应用程序还可能会遇到缓存和性能问题。

要解决这类问题，最好使用React Query或SWR之类的包。这些包提供了一组现成的默认配置。它们处理很多事情，比如缓存和性能，这些都很难单独管理。这两个包都提供了一些默认配置和选项，您可以使用它们根据应用程序的要求自定义它们的行为。这些包将从后端API端点获取和缓存异步数据，并使应用程序状态更易于维护。

我在我的项目中使用了React Query和SWR，我喜欢它们。您可以查看它们的比较和特性，以决定应该使用哪一种。

将Commitizen和Semantic Release与Husky“KDSP”结合使用。如果您经常部署和发布应用程序，那么您可能会遇到版本控制问题。当您在一个大型应用程序上工作，并且有多个开发人员参与其中时，管理发布变得更加困难。跟踪变更日志变得非常困难。手动更新变更日志变得非常困难，并且您的变更日志会慢慢过时。

您可以将Committeizen和Semantic Release等软件包结合起来，以帮助您进行版本控制和维护变更日志。这些工具通过使变更日志与特定版本中部署的变更保持同步，帮助您自动化发布过程的一部分。您可以使用Husky之类的工具来确保所有参与者都遵循既定的模式来编写提交消息并帮助您管理变更日志。

使用故事书可视化UI组件“KDSP”在大型代码库中，您的应用程序很可能由许多组件组成。其中一些组件将过时、有缺陷或不再需要。但是，在大型应用程序中很难跟踪这种情况。开发人员可能会创建新组件，其行为可能与现有组件相似，因为他们不知道以前的组件存在。这种情况经常发生，因为无法跟踪应用程序当前拥有的组件以及它们之间的交互方式。

“KDSP”工具（如Storybook）将帮助您跟踪代码库当前包含的所有组件。设置故事书很容易，并且可以与现有的Next集成。js应用程序。下一个js提供了一个示例，演示如何使用应用程序设置故事书。

我一直喜欢使用Storybook，因为它可以帮助我的开发团队了解每个组件的行为以及它公开的API。它是每个开发人员的文档来源。故事书还帮助设计师了解所有组件和交互的行为。在每个版本中，您还可以将色度与故事书一起用于视觉测试和捕捉回归问题。