npm 包 @martin_hotell/schematics 使用教程

前言

在前端开发中，我们常常需要创建一些相似的组件、模块，从而提高重用性、减少重复工作。Angular CLI 的 schematics 工具便是为此而生，它可以帮助我们快速创建生成各种类型的代码模板，如组件、服务、模块、指令等等。

而 @martin_hotell/schematics 这个 npm 包则是基于 Angular CLI 的 schematics 工具上开发的更为简洁、易用的一个库。它提供了许多高质量的代码生成器，可以帮助我们快速生成 Angular 应用程序所需的标准文件结构和相应的代码实现。

在本文中，我们将一步步学习如何使用 @martin_hotell/schematics 这个 npm 包，建立起使用这个工具库的基本能力。

什么是 @martin_hotell/schematics？

@martin_hotell/schematics 是一组可重用的代码生成器，它基于原生的 Angular CLI 的 schematics 工具封装而来。每个生成器都是一个自包含的 npm 包，可以灵活地在不同的项目中使用，同时也可以与其他 schematics 库自由组合。

@martin_hotell/schematics 库包含的生成器可以帮助我们快速生成一个标准的 Angular 应用程序结构，包括模块、组件、服务、指令等等。这些生成器所生成的代码结构和代码实现均为行业标准和最佳实践，并且包含各种配置参数，可以灵活满足各种需求。

安装和使用 @martin_hotell/schematics

安装

首先，我们需要全局安装 @angular/cli：

npm install -g @angular/cli

然后，我们可以使用 @martin_hotell/schematics 命令来生成我们需要的代码结构。

npm i @martin_hotell/schematics -D

使用

接下来，我们将以 module 生成器为例，简单介绍如何使用 @martin_hotell/schematics。

自动生成一个模块

ng g @martin_hotell/schematics:module --name=booking --path=app

执行以上命令后，会自动生成一个 booking 模块，位于 app 目录下，具体来说，它会生成：

|- app
   |- booking
      |- booking.module.ts
      |- booking-routing.module.ts

这里，我们使用了 @martin_hotell/schematics 中的 module 生成器，参数 --name 表示模块名称，--path 表示生成的文件所在目录。

自动生成一个组件

ng g @martin_hotell/schematics:component --name=booking --path=app/booking

执行以上命令后，会自动生成一个 booking 组件，位于 app/booking 目录下，具体来说，它会生成：

|- app
   |- booking
      |- booking.component.html
      |- booking.component.scss
      |- booking.component.spec.ts
      |- booking.component.ts

这里，我们使用了 @martin_hotell/schematics 中的 component 生成器，参数 --name 表示组件名称，--path 表示生成的文件所在目录。

自动生成一个服务

ng g @martin_hotell/schematics:service --name=booking --path=app/booking

执行以上命令后，会自动生成一个 booking 服务，位于 app/booking 目录下，具体来说，它会生成：

|- app
   |- booking
      |- booking.service.spec.ts
      |- booking.service.ts

这里，我们使用了 @martin_hotell/schematics 中的 service 生成器，参数 --name 表示服务名称，--path 表示生成的文件所在目录。

注意：以上的路径写法是 Unix 风格的，如果使用 Windows 操作系统，请将斜杠 / 替换为反斜杠 \。

总结

本文介绍了 @martin_hotell/schematics 这个 npm 包的基本使用方法，它可以大大提升我们的开发效率。当然，这仅仅是 @martin_hotell/schematics 可以为我们做的事情的冰山一角，它还可以帮助我们构建更为复杂的应用程序结构、执行各种特定的任务。对于使用 Angular 进行开发的任何人来说，掌握这个工具库都是十分有用的。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e24467f