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

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 工具非常方便，不仅可以提高代码的可重用性，还能有更多机会与团队中的其他工程师进行协作和讨论。

引用

 

https://github.com/nrwl/nx