大公司为何使用 Nx?Monorepo 工具 5 分钟快速构建

nx-monorepo

Monorepo简介

前端技术近年来发展迅速,包括 ES6、SCSS 预处理、npm、前端框架、CI/CD、Docker 等。如果您想完成一个小型应用程序,除了上述技术外,可能还需要维护一个相对庞大和复杂的平台。

Monorepository是一个框架概念,从字面意思Mono(一个)repo(存储库),可以得知这个(Monorepo)框架是把大量代码放在同一个代码库中做管理,不同于旧有的分离概念,Google是优先使用Google的公司之一,也是最早采用Monorepo的公司之一。

要了解更多信息,请参阅以下文章:

你真的了解 Monorepo 吗?5 分钟了解大型架构的前端

Nx 简介

Nx 是一款快速、高效、可扩展的 Monorepo 工具,具有以下功能。

1.支持三大前端框架:Vue、React、Angular

2.支持后端框架:Express、Nest、Next

3. 关于 Monorepo 框架

4.支持各类测试:Cypress、Jest

Nx 前端框架概念

Nx 是一个前端框架,其设计理念与著名的程序编辑器 Visual Studio Code 非常相似。在 Visual Studio Code 中,即使不安装任何扩展,也能获得出色的开发体验。Nx 也遵循类似的原则,其核心功能简洁明了,没有模棱两可之处,让开发变得更加清晰明了。

Nx 的核心功能包括项目管理、任务执行、代码生成和依赖性分析。这些功能使开发团队能够更有效地协作,管理大型前端项目,并确保代码质量和一致性。有了 Nx,您可以轻松创建、维护和扩展前端项目,而不必担心配置和工具混乱。

与 Visual Studio Code 扩展类似,Nx 也支持插件,您可以为自己的项目选择合适的插件。这种灵活性使 Nx 适用于从小型应用程序到大型企业应用程序的各种前端项目。

接下来,让我们尝试创建一个简单的 Nx 项目。首先,你需要安装 Nx 并创建一个新项目。然后,你可以使用 Nx 的命令行工具生成组件、服务和其他代码文件,Nx 还提供了许多预定义的项目模板,以加快项目启动过程。您可以轻松定制项目结构和配置,以满足您的特定需求。

Nx 还提供强大的任务执行功能,帮助您实现构建、测试和部署流程的自动化。这有助于确保项目的可靠性和稳定性,并提高开发效率。

简而言之,Nx 是一个强大而灵活的前端框架,其设计注重简单性和可定制性,使开发团队更容易管理前端项目,并提供良好的开发体验。无论您是个人开发者还是大型团队,Nx 都能帮助您构建高质量的前端应用程序。

Nx 构建

创建新的 Nx 环境

读者可以使用以下命令创建新的 Nx 工作环境

npx create-nx-workspace@latest

创建完成后,您需要选择预配置。以下是一些 Nx 预配置,供读者参考。

Workspace(Typescript)

npx create-nx-workspace –preset=core

React

npx create-nx-workspace –preset=react

Next.js

npx create-nx-workspace –preset=next

Angular

npx create-nx-workspace –preset=angular

FullStack — Angular & Nest.js

npx create-nx-workspace –preset=angular-nest

Backend — Express

npx create-nx-workspace –preset=express

在现有项目上构建 Nx 环境

如果现有项目有 Lerna 或 Yarn monorepo,可以使用以下命令创建 npx add-nx-to-monorepo

如果您已经有一个 React App 项目,也可以使用以下命令构建 Nx

npx cra-to-nx

安装 Nx CLI

如果想改善开发人员的体验,还建议安装全域 Nx CLI。

npm install -g nx

Nx 文件夹结构

下面是一个快速示例,使用的是 Nx 官方文档中的一个示例。

一个 Nx 项目大致有以下文件夹

 

1. Myorg/ 用于您自己的大型 Nx 项目名称

2./apps/ 将存放各种项目,是所有项目的主要入口。建议该文件夹中的所有项目应尽可能轻量级,而代码可重复使用的大型程序应放在库中,并在每个项目中加载。

3./libs/ 包含所有库项目。以我自己的工作为例,我们将一些常用功能模块化并存储在这里,例如PWA

4./tools/ 包含常用代码的脚本,您也可以在此文件夹中放置参数。例如数据库设置和脚本

5./workspace.json 列出了 Nx 大项目中的所有小项目。

6./nx.json 将根据 Nx CLI 进行配置,还将告诉 Nx 需要缓存哪些内容以及如何运行。

7./tsconfig.base.json 设置了全局 TypeScript,并在每个库中创建了别名,以帮助加载 TypeScript 或 JavaScript。

结论

这是对 Nx 的快速介绍,解释了 Nx 除了作为 Monorepo 框架的工具外,还支持哪些功能,以及使用命令根据当前用户的上下文构建 Nx 环境。

我目前在一家外企工作,使用 Nx 工具管理多个项目。我个人认为使用 Nx 工具非常方便,不仅可以提高代码的可重用性,还能有更多机会与团队中的其他工程师进行协作和讨论。

引用

Nx : Smart, Fast and Extensible Build System

 

Nx : Smart, Fast and Extensible Build System

 

https://github.com/nrwl/nx

https://nx.dev/getting-started/intro

https://github.com/korfuri/awesome-monorepo

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

zh_CN简体中文