# 开发前必读

该工程为页面(page)工程，开发完成后，需要通过发布 npm 包的方式集成到应用主工程中

## 开发前准备

1. node (建议版本 12.18.3 )
2. npm
3. https://www.npmjs.com/ 账号
4. git
5. vscode 与插件安装:
   在 vscode 官网下载最新版 vscode 安装即可；
   请安装以下几款 vscode 插件，以方便开发: pont、ESLint、Prettier、TSLint、AppWorks

## 开发说明

#### 先把 git 整起来，方便协作

1. 新建代码库（请找 竹杖 开权限）
   将代码库建在对应的分组中
   仓库地址：

   - 阿里员工：http://gitlab.alibaba-inc.com/
   - 外包或者生态：https://codeup.aliyun.com/ 需注册（可使用钉钉或者支付宝账号注册）

2. 请完成全局设置
   git config --global user.name "你的名字"
   git config --global user.email "你的邮箱"

3. 工程初始化后，第一步请先完成 git 的出初始化:

`cd 到当前的工程目录

git init

git add .

git commit '项目初始化'
`

4. 关联 git 仓库

   git remote add origin 远程仓库地址

   git push -u origin master

#### 项目跑起来 - 开发态

- 简单跑起来

1. cd 到当前的工程目录
2. npm install
3. npm run start

- 生成 service 层代码

1. 通过 pont-config.json 中的 origins 字段来指定生成 services 层代码的 swagger 服务地址
2. vscode 左下角 sync all generate 来生成 services 代码

- 书写页面

参考 pages 中的 Demo1 来完成一个完整的页面书写

- 添加路由

在 routes.ts 添加你的页面路由(参考 Demo1 和 Demo2 的路由配置)

#### 构建和发布

页面开发完成后

- 构建：npm run build
- 发布：
  npm login - 使用自己的 https://www.npmjs.com/ 在本地登录

  npm publish

1. 页面会默认发布到 https://registry.npmjs.org 的 @aliedu 域下，请勿随意修改，如果没有权限，请联系 竹杖 添加权限；
2. 如果发现不是在该域下，请在 package.json 中修改 name 字段为 @aliedu/xxx
3. 发布前会自动完成构建；
4. 同一个版本号只能发布一次；
5. services 层代码只在开发态使用，不会发布

#### 页面集成

在需要的应用中使用 npm install @aliedu/xxx --save 的方式安装以集成该页面

#### 工程目录结构及开发介绍

参考文档 https://yuque.antfin-inc.com/docs/share/af2ae56b-1e5b-43e0-a0b8-e96795827a6b?# 《工程开发文档 - PC 端 web》

#### 注意事项

1. 请在代码中使用相对路径，不要用 alias 或者绝对路径
2. services 层代码不参与编译，只在开发环境是使用，
   具体使用的 swagger 文档和模块名称请于要集成的应用保持一致
3. app.tsx 只在开发态使用，集成到应用中不使用，不要写业务代码，一般也不用修改
4. routes.tsx 中的路由建议只使用一级
5. ice，react，以及 fusion/@b-design 等通用基础组件库都使用顶层依赖，该工程中只安装 devDependencies