Angular使用cli生成自定义文件、组件的方法

不得不说，和传统的复制黏贴来创建组件的方法相比，使用angular-cli的脚手架功能来创建模块、组件显得非常高效，不仅仅有了创建了文件，还包含了一些必须的代码，同时也将组件导入了最近的模块，一些重复性工作就使用cli可以节省掉。angular提供了丰富的文件类型，但是总归是有些我们自己的项目需要，我们需要创建自定义后缀的组件，这时候就不得不舍弃cli了，那么能不能使用自定义的方式来达到脚手架创建呢？

angular 脚手架创建的方式

我们首先来看看angular-cli提供的一些命令是怎么创建文件的。

看angular文档我们可以看到这个词：Schematic，这个词意为原理图。Schematic是一个脚手架库，定义如何通过创建、修改、重构或移动文件和代码来生成或转换编程项目。Angular Cli使用原理图生成和修改项目文件。库开发人员可以创建原理图，使Cli能够生成其已发布的库。可以查看https://www.npmjs.com/package/@angular-devkit/schematics。

那这样的话，我们可以知道angular是借助的Schematic来生成项目文件。再查看发现node_module里面有个@Schematics/angular，里面定义了我们可以使用cli生成的所有文件，包括components/class/enum/interface等等。

点开查看components，里面有一些ts文件，还有一个files文件夹，里面包含着所有我们生成component的文件：

__name@dasherize@if-flat__

那想想，在我们运行Cli创建组件的时候，会使用这里的模板，用file文件夹里面的文件生成项目组件。其他的先不管，我们按照这里的components是不是可以来构造我们自己的“原理图”呢？

自定义原理图

先看看我们的需求，我们现在项目的项目里面，页面是page，按照angular原来的写法，所有的page的组件都是：XXXX.component.ts。我们为了将页面和组件进行区分，页面的文件都是XXX.page.ts。我们先在node_module/@Schematics/angula/下面复制component新建一个page。

现在，将page下面的files文件夹中的文件名.component都改为.page（由于我们不用单元测试文件，直接删除.spec.ts文件即可）：

page

files
__name@dasherize@if-flat__ __name@dasherize__.page.__styleext__ __name@dasherize__.page.html __name@dasherize__.page.ts
index.d.ts index.js 命令运行时会执行这个js文件 schema.d.ts schema.json 定义了这个生成器命令可以接受的参数

接下来再看page里面的index.js，这个js文件在我们跑自己的命令的时候会执行。看这个文件，里面的代码虽然有点看不懂，但是猜猜还是可以的，有些关键地方：

const componentPath = `/${options.path}/`      + (options.flat ? '' : core_1.strings.dasherize(options.name) + '/')      + core_1.strings.dasherize(options.name)      + '.component';const classifiedName = core_1.strings.classify(`${options.name}Component`);