当前位置：服务支持 > 软件文章 > Nrwl Nx：新一代Monorepo框架软件

Nrwl Nx：新一代Monorepo框架软件

阅读数 55

Nx是前Google的Angular团队成员Jeff Cross和Victor Savkin创办的，致力于新一代的智能化、可扩展的构建框架

用于管理Monorepo 非常合适，下面我们可以快速的利用Nx命令行创建一个Monorepo的项目。

一、快速开始

以下这个例子是来自于官网的10分钟YouTube教程，很适合用来快速学习Nx。

为了更好的体验Nx命令行所带来的变化，每一步都用git记录了，并且上传到了github上。

1.1 安装Nx

npm install -g nx
# or
yarn add global nx
# or
tyarn add global nx

1.2 创建一个Monorepo的原始项目

设置包含 React 应用程序的 Nx 工作区。

npx create-nx-workspace@latest stores --preset=react

命令输入之后，会有个选择框。

使用命令后生成了一个vscode项目

对应的git记录：https://github.com/yuexing0921/learning-nx/commit/0656a451f8037d392e1e3f084bcf527f283bddab

1.3 启动项目

nx serve stores

控制台和浏览器的输出界面

现在Monorepo只有一个项目，现在在添加一个blog项目

1.4 添加新的项目进入Monorepo

yarn add @nrwl/next
nx generate @nrwl/next:app blog

会出现stylesheet的一些选择页面

重新构建完成之后项目变成了这样

在控制台输入nx serve blog

对应的git提交记录：https://github.com/yuexing0921/learning-nx/commit/538f85d576d6a7cf421ab50154103fa9ac0ba888

1.5 测试项目

之前可以看出，Nx生成的模板项目中已经默认生成了一些测试代码，甚至连e2e测试框架都生成了。

## Unit test
nx test bike-store

1.6 编译项目

项目的开发和test我们已经做过了，接下来可以看构建了

# 对所有项目进行编译
nx run-many --target=build --all

构建结果

至此我们一个基本的Monorepo项目已经搭建完成了，包含了开发、测试、编译三个流程。

二进阶应用

一个Monorepo项目必然会有一些共通的组件库、函数库，他们之间又是如何引用和管理的尼？

2.1 添加组件库

# 添加一个react组件库
nx generate @nrwl/react:lib header

生成的代码

在bike-store中引入这个组件库，启动项目stores nx serve stores

可以看到，组件库已经成功使用了，相比于传统的npm私有库的方式，这种方式更加方便调试和开发。

git提交记录：https://github.com/yuexing0921/learning-nx/commit/9e4d30145780948a7a7e2f4f18ee7852e296e132

2.2 添加storybook

对之前的共通组件添加storybook

yarn add @nrwl/storybook
nx generate storybook-configuration header

控制台实际输出

生成之后的文件变更

具体的文件记录查看：https://github.com/yuexing0921/learning-nx/commit/04c396df56113b12970b4a54f01183e460b7f8bd

只需要简单的一行命令就添加了storybook的支持，还自动集成了测试代码，把相关依赖加载都做了。

2.3 查看组件库的依赖关系图

当我们面对一个Monorepo的应用时，在修改或者重构一个共同组件库的时候，最担心的是影响范围，那么有没有办法办法去分析这些库的依赖关系尼？Nx已经帮我们想好了，这个肯定有。

nx dep-graph

这里可以看到header组件被多个应用依赖了，还支持各种筛选。

2.4 e2e测试

之前我们已经知道，在添加项目的时候，可以添加基于cypresss的e2e测试，下面我们对blog项目启动e2e测试。

nx e2e blog-e2e --watch

三、其他的功能

3.1 编排任务

# 将并行测试所有项目
nx run-many --target=test --all --parallel=5

# 将并行构建proj1和proj2它们的依赖项。
# 请注意，如果app1依赖于其依赖项的输出（例如:公共组件库），
# Nx将公共组件库首先构建，然后才构建应用程序。
nx run-many --target=build --projects=app1,app2 --parallel=5

3.2 affected功能

只测试变更过代码的项目，nx run-many --target=test --all会启动所有测试代码，但是在一个Monorepo项目中，这个会耗时非常多，在CI中应该只允许涉及到变更过代码的项目，那么就可以用下面命令启动

nx affected --target=test

3.3 缓存和分发功能

Nx所有的命令都有默认的缓存功能，会明确告知当前运行是否基于缓存，同样的他们还有对应的Nx Cloud 功能，可以把当前运行时的结果同步到Cloud内。

Nx Cloud还没有怎么研究，还不是很清楚它具体的功能

3.4 插件机制

Nx目前支持的项目比较多，比如:

## 生成React-native应用
nx generate @nrwl/react-native:app mobile-app
## 生成gatsby应用
nx generate @nrwl/gatsby:app xxx
## 生成express应用
nx generate @nrwl/express:app server
## 更多应用，可以用以下命令查看
nx list

nx list这行命令在国内应该会比较卡，有可能社区插件拉不下来

Nx是基于一种插件的机制来扩展项目，所以他的核心就是插件，类似于VsCode的插件机制。

参考链接

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删

武汉格发信息技术有限公司，格发许可优化管理系统可以帮你评估贵公司软件许可的真实需求，再低成本合规性管理软件许可,帮助贵司提高软件投资回报率，为软件采购、使用提供科学决策依据。支持的软件有: CAD,CAE,PDM,PLM,Catia,Ugnx, AutoCAD, Pro/E, Solidworks ,Hyperworks, Protel,CAXA,OpenWorks LandMark,MATLAB,Enovia,Winchill,TeamCenter,MathCAD,Ansys, Abaqus,ls-dyna, Fluent, MSC,Bentley,License,UG,ug,catia,Dassault Systèmes,AutoDesk,Altair,autocad,PTC,SolidWorks,Ansys,Siemens PLM Software,Paradigm,Mathworks,Borland,AVEVA,ESRI,hP,Solibri,Progman,Leica,Cadence,IBM,SIMULIA,Citrix,Sybase,Schlumberger,MSC Products...

返回上级列表