hc-gis

GIS 项目

这是一个 GIS 编辑器的项目

前期准备

1. 安装 Node.js 16+ 以上的版本
2. 安装 PNPM 包管理工具

可选

1. 安装 VSCode 代码编辑器
2. 使用 VSCode 安装项目中推荐的编辑器插件

工具

Nx

该项目脚手架使用 Nx 创建，Nx 是智能，快速，可扩展的构建系统，具有开箱即用的 monorepo 管理能力。其详细的介绍和使用说明请参阅官网相关文档。

常用命令说明

• 使用 pnpm nx g @nrwl/react:app <应用名称> 来添加新的 React 应用到应用目录中
• 使用 pnpm nx g @nrwl/react:lib <公共库名称> 来添加新的 React 库到公共库目录中
• 使用 pnpm nx g @nrwl/js:lib <公共库名称> 来添加新的库到公共库目录中

PNPM

该项目以 PNPM 为包管理工具，其作为 NPM 的替代品，具有高性能，低磁盘占用及更合理的依赖管理方式等特性。其详细的介绍和使用说明请参阅官网相关文档。

常用命令说明

• 在启动项目前请使用 pnpm install 来安装项目所需的所有依赖，并确保安装成功
• 使用 pnpm add <...依赖名称> 来安装指定的依赖
• 使用 pnpm add <...依赖名称> --save-dev 来安装指定的开发依赖
• 使用 pnpm remove <...依赖名称> 来删除指定的依赖
• 使用 pnpm <脚本名称> 来执行 package.json 中 scripts 字段内的脚本命令
• 使用 pnpm <可执行文件> 来执行项目中安装的可执行文件

通用说明

• 项目使用 monorepo 的项目管理方式，应用放置于 apps 目录下，公共库放置于 libs 目录下
• 项目采用 husky 来编写 git hook 以便在代码提交前对代码进行格式化，风格检查操作
• 项目采用 lint-staged 来对待提交的代码进行格式化，风格检查操作
• 项目采用 Prettier 作为代码格式化工具，并在代码提交阶段会对待提交的文件进行格式化
• 项目使用 ESLint 作为代码风格检查工具，并在代码提交阶段会对待提交的代码进行风格检查，检查不通过的代码将被禁止提交
• 项目使用 约定式提交 作为代码提交信息的规范
• 项目使用 commitlint 作为代码提交信息的格式检查工具，检查不通过的信息将被禁止提交
• 项目集成了 commitizen 提交信息填写工具，可使用 pnpm cz 替代 git commit 来交互式的编写提交信息

命名约定

1. 项目名称，目录名，文件名，应采用 kebab-case 的命名风格，例如 my-app，my-lib，some-service 等，避免使用 myApp，MyApp 等形式
2. 文件名推荐使用 功能.类型.文件扩展名 的命名格式，功能 部分的名称采用 kebab-case 的命名风格，类型 部分有且只有一个单词，且为单数形式，例如，project.hook.ts，http.service.ts，等等
3. 文件 类型 部分不得使用任何形式的简写，例如，http.srv.ts，可采用常见的名称缩写，scene.dto.ts
4. class interface type enum 类型应采用 PascalCase 的命名风格，例如 MyClass, MyInterface，MyType
5. enum 的名称避免使用复数形式，例如 MyTypes
6. 常量宜采用 CONSTANT_CASE 的命名风格，例如 BASE_HREF
7. 对于事件回调的名称一律以 on 开头，例如 onClick / onChange，避免使用 handleXx 的命名方式，保持回调参数名称和回调函数名称保持一致
8. 事件回调的名称以 onSomeThingChange 的方式命名，即 on + 名词 + 动词 的形式，例如 onItemClick，onNameChange 等等
9. 事件回调函数的名称建议与事件回调参数的名称保持一致，例如 <Input onChange={onChange} />，这样在做回调函数透传的时候可以保持名称一致，例如 <Input onChange={props.onChange} />

应用模块的公共约定

apps/ 目录用于放置应用相关的项目，libs/ 目录用于放置公共库相关的项目，例如 apps/my-app/ 或 libs/my-lib/

src/app 目录下的子文件夹视为应用中的顶级模块，顶级模块下的子文件夹可以作为顶级模块的子模块，子模块不应再包含子模块。顶级模块及其子模块可以通过别名的方式在项目中的任意位置引用到。除此之外不允许通过别名方式引用其他模块。顶级模块的子模块不应再从顶级模块导出，而是直接通过子模块的别名进行引用。

所有文件夹中的公共模块应通过 index.ts 文件层层导出供文件夹外部的模块使用。

例如下列目录结构

common constants core 三个顶级模块，可以在其他模块中直接通过 @gis/common @gis/constants @gis/core 导入使用，http 模块作为次顶级模块可以通过 @gis/common/http 导入到模块中使用，但是需要注意的是，common 模块不应该包含 http 模块的公共接口，即 http 模块的公共接口只能从 @gis/common/http 导入。common 模块下的 utils 模块作为内部模块，不应该通过 @gis/common/utils 来引用，应该在 src/app/common/index.ts 文件中将其导出，并通过 @gis/common 来导入其公共接口

└── src/
    └── app/
        ├── common/             # 公共模块，顶级模块，通过 @gis/common 引用
        │   ├── index.ts        # 公共模块的导出文件，所有非子模块的公共的接口应通过该文件导出
        │   ├── http/           # HTTP 模块，作为顶级模块的子模块，通过 @gis/common/http 引用
        │   │   ├── index.ts    # HTTP 模块的导出文件，所有公共的接口通过该文件导出
        │   │   └── http.ts     # HTTP 相关的功能，通过 index.ts 导出
        │   └── utils/          # 工具模块，内部模块，应在 src/app/common/index.ts 中导出供外部使用
        ├── constants/
        └── core/

编码风格指南

详细的编码风格指南请参照 CODING_STYLE_GUIDE

应用

应用的详细说明请参阅应用各自的说明文档

1. GIS 编辑器 - GIS 编辑器是一款 GIS 低代码开发工具，具备快速开发 GIS 应用的能力