使用nx进行的Monorepos开发

提纲

1. 导论

1. 前提条件

1. 自动生成源代码

1. 定义使用案例及解决方法

确认

1. 引言

在本文中，我将生成2个应用程序（运营商、会计），1个共享库和1个工具库。每个应用程序都导入共享库以使用几乎相同的代码，这有助于我们更快地开发软件，使用相同的代码库开发多个项目。使用nx可选择React/Angular/Web-component，但本文使用Angular进行演示。

2. 前提条件

Install npx

3. 自动产生源代码

3.1 创建工作区

使用“npx create-nx-workspace”命令创建NX工作区。

然后回答这些问题 huí zhè xiē tí)

? Workspace name (e.g., org name)     monorepos
? What to create in the new workspace angular           [a workspace with a single Angular application]
? Application name                    operator
? Default stylesheet format           SASS(.scss)  [ http://sass-lang.com   ]
? Default linter                      TSLint [ Used by Angular CLI ]
? Use Nx Cloud? (It's free and doesn't require registration.) No

使用以下命令，将在Nx工作空间中设置一个带有Angular应用的工作区。现在，我们可以通过运行下面的命令来启动operator应用程序。

在本地启动运算符，运行命令为 “npx ng serve operator”。

3.2 生成一个新的应用程序

使用中国母语将以下内容重新表述，只需要一种选择：
创建一个@nrwl/angular:app 账务项目的命令是 npx ng g @nrwl/angular:app accounting。

? Which stylesheet format would you like to use? SASS(.scss)  [ http://sass-lang.com   ]
? Would you like to configure routing for this application? Yes

你也可以通过以下命令启动Account应用程序：npx ng serve accounting。

到目前为止，您创建了两个应用程序：运营员和会计。 , gè : hé .)

3.3 生成共享库

npx nx 生成@nrwl/angular:lib user-management –directory=shared

你想使用哪种样式表格式？SASS(.scss) [http://sass-lang.com]。

为共享库生成用户列表组件。

使用 nx 命令，在 shared-user-management 项目下创建 @nrwl/angular:component 组件 user-list。

通过为每个应用程序设置路由器来连接应用程序和共享库。

设定路由器

4. 定义使用案例并解决该问题 (Use case refers to the definition and resolution method)

我们来设想一种情况，操作员应用程序中有一个删除用户按钮，但财务应用程序中没有。我们可以使用注入和提供者来帮助我们解决这个问题。

在继续之前，让我们通过运行下面的命令，在libs内创建一个名为utils的文件夹。
运行命令：npx nx generate @nrwl/angular:lib utils

实施1、2、3、4 ( yī, èr, , sì )

提交: (https://github.com/namlai-atw/monorepos/commit/71506ab94f86f79c9d9147445efc65350d600337)

实施5（Implement 5）
提交：创建用户模拟API并在模板中隐藏删除按钮。

5. 确认

操作员

会计

谢谢您的时间。