angular 标准目录结构_[Angular 组件库 NG-ZORRO 基础入门] - 源码初窥: 项目结构

前言回顾

我们今天开始，从框架前端走向框架后端，看一看 NG-ZORRO 的源码是什么样的，从项目结构到简单组件说明，来了解 NG-ZORRO 的设计模式。

准备环境

下载 ng-zorro-antd

$ git clone https://github.com/NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd && npm i
$ tree ./ -L 1

我们可以看到 terminal 输出了目录结构：

./
├── components
├── docs
├── integration
├── schematics
├── scripts
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README-zh_CN.md
├── README.md
├── angular.json
├── build-config.js
├── commitlint.config.js
├── gulpfile.js
├── logo.svg
├── ngsw-config.json
├── package-lock.json
├── package.json
├── setup-shared-libs.sh
├── tsconfig-build.json
├── tsconfig.json
└── tslint.json

核心目录介绍

| 文件/文件名称 | 说明 | 
| components | 组件文件夹，包含框架组件源码 |
| docs | 非组件文章文档，如国际化、全局配置等 |
| integration | 构建操作工具，搭配 travis 使用 |
| schematics | 自定义脚手架，ng g add ng-zorro-antd |
| scripts | 发布/调试脚本 |
| CODE_OF_CONDUCT.md | 贡献指南 |
| CHANGELOG.md | 发布日志 |

启动

我们下载源码并安装完依赖后，启动它并访问 http://localhost:4200/ 即可看到项目主页：

$ npm run start

我们能够在 terminal 中看到部分编译过程，通过 gulp 工具拆分为多个 TASK 执行，现在我们能看到项目目录下多了一个 site 文件夹，里面存放了我们项目运行显示页的内容，那么这些文件是哪来的呢？

编译过程

我们看到 site/doc/app 下包含了全部组件的示例代码和 API 说明文件，实际上我们看一下 scripts/site/generate-site.js 构建主页的脚本就能看出一些端倪。

执行 npm run start 过程中，有一步就是将 components 目录下组件文件夹里的 demo 和 doc 文件夹复制出来生成 site 页面，这样的好处是显而易见的，我们调试过程中会自动被编译到 site 文件夹下，从而能够快速看到我们修改后的组件表现，不必在多个地方重复写相同的示例代码，感兴趣的同学可以修改任意组件的代码看一下效果。

更多的编译过程可以参考 gulp 执行 start:dev 相关的 TASK：

task('start:dev', series(
  'clean',
  'start:site'
));

组件结构

我们以第一个组件 Button 来介绍一下组件结构，所有组件的文件结构都是遵循此格式。

components/button
├── demo
├── doc
├── style
├── index.ts
├── nz-button-group.component.html
├── nz-button-group.component.ts
├── nz-button.component.html
├── nz-button.component.ts
├── nz-button.module.ts
├── nz-button.spec.ts
├── package.json
└── public-api.ts

结构说明：

| 文件/文件名称 | 说明 |
| demo | 示例代码，分为 ts 文件和 markdown 介绍文件 |
| docs | 组件介绍及 API 说明 |
| style | 样式文件，通常与 ant-design 同步 |
| *.spec.ts | 测试文件 |
| package.json | ng-packagr 配置 |

通常开发组件时，这些项目都是必不可少的，其余文件为组件逻辑相关，所以一旦发现组件 bug，我们通常需要到逻辑代码文件去调试定位。

core 文件夹

我们看到 button 组件有些属性引入了其他装饰符，如：

import { InputBoolean } from 'ng-zorro-antd/core';
...
@Input() @InputBoolean() nzBlock: boolean = false;

这些通用方法存在 core 文件夹下，多个组件都需要使用的方法和指令都会存放到此文件夹下，更多内容大家可自行阅读以下文件。

NG-ZORRO/ng-zorro-antd​github.com

样式文件

通常我们不应该去修改 style 文件夹下的样式文件，因为这是和 ant-design 样式同步，官方 Github 搭建了一个 机器人 去处理这些事务。

如果的确出现必须修改样式情况，可以写到 components/style/patch.less 文件中去。

总结 & 预告

现在我们对整个项目有了一个大致的了解，各部分文件功能也作了简单说明，对于大部分情况，如果需要处理 bug 问题，只需要关注 components 文件夹下的文件逻辑即可。之后我们也会从简单组件切入，带领大家去体验如何创建一个组件。如果仍有不理解的地方，可以留言补充。:)

相关资料

• iThelp 文章地址：

[Angular 元件庫 NG-ZORRO 基礎入門] Day 23 - 原始碼初窺: 專案結構 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天​ithelp.ithome.com.tw

• gulp：

The streaming build system​gulpjs.com

• travis：

Travis CI User Documentation​docs.travis-ci.com