跳到主要内容

导出平台项目到本地进行开发

配置本地前端开发环境​

按照文档 配置本地前端开发环境 配置本地前端开发环境

导出平台项目源码到本地​

  1. 在平台项目页面，点击 “导出 Windows 包” 或者 “导出 Linux 包”，并且解压缩。
  2. 在平台项目页面，点击 “导出 Seed Data”，将导出的 json 文件重命名为 project-seed-data.json 并复制到上一步解压过后的根目录下。

export-project

安装依赖​

在导出项目源码的 source_code\frontend 目录下，运行以下命令安装依赖：

yarn

确认脚本版本​

检查 source_code\frontend\package.json 里的如下面截图里高亮的 @icp/ 开头的包的版本依赖

  • 如果你的 package.json 里的 @icp/ 包是 2.XX 的版本，请确保其版本大于等于 2.0.67。
  • 如果你的 package.json 里的 @icp/ 包是 3.XX 的版本，请确保其版本大于等于 3.0.26。

package-json-version

如果版本不符合，可以在 source_code\frontend 目录下运行如下命令更新到最新版本然后再重新运行 yarn 命令安装依赖

yarn upgrade:icp

yarn

提取所有前端配置和 PBC 里的所有表单、页面​

在导出项目源码的 source_code\frontend 目录下，运行以下命令提取所有的配置文件：

yarn icp-scripts decompress-front-end --input ../../project-seed-data.json --output .

执行成功过后，检查 src/pbc 下是否具有该项目所有的 PBC。

Code Generator，将所有表单、页面生成 react 代码​

运行成功上述所有步骤过后，该项目所有的 PBC 下的表单和页面 json 源码均在 src/pbc 下。

如果想要将这些表单和页面 json 源码生成 JS 代码进行修改，可以在导出项目源码的 source_code\frontend 目录下，运行以下命令，生成所有 PBC 的前端 react jsx 代码：

yarn generate-code

执行成功过后，检查 src/pbcCode 下的文件夹目录，是否和 src/pbc 目录一一对应。

pbc 目录是包含所有的 pbc 的 json 配置。pbcCode 是其中所有的表单、页面被转换成的 react jsx 代码。

项目文件解读​

以我的测试项目为例，前端项目本地工程文件结构如下：

其中，pbc 目录是包含所有的 pbc 的 json 配置。pbcCode 是其中所有的表单、页面被转换成的 react jsx 代码。

frontend
├── appConfig
│   └── app.config.json
├── mockServer
│   ├── server.js
│   └── ...
├── public
│   ├── index.html
│   └── ...
├── src
│   ├── pbc
│   ├── pbcCode
│   ├── App.js
│   └── ...
├── .eslintrc.js
├── package.json
├── README.md
├── webpack.config.js
└── yarn.lock
└── ...

顶层配置文件​

本地前端项目根目录下包含的顶层配置文件，例如 package.json、webpack.config.js、.eslintrc.js 等，均为普通开源前端项目的配置文件。

appConfig 目录​

appConfig/app.config.json 对应平台项目的 配置管理 -> 前端配置 Tab。

存储了当前项目的所有基础前端配置，例如网站名称、菜单、主题等配置信息。

例如，这里示例项目的网站支持的多语言配置，在平台里如图所示：

app.config-1

对应的本地项目配置为：

app.config-2

src 源码目录​

src 存放整个网站的所有源码。其中

  • index.js 为整个网站的入口文件。

  • src/components/Templates 对应网站的框架模板，会自动解析 app.config.json 里的 templateConfig，显示对应的配置。

  • src/pbc 为项目的所有 PBC 下的所有表单和页面。

    例如，这里的示例项目里有一个 Gantt Doc(gantt-doc) PBC，下面有一个 Defect(defect-form) 表单，在其 Default(default) 布局里有一个 Count 的字段，在平台配置里如截图所示：

local-project-1 local-project-2

对应的本地项目代码如下图所示：

local-project-3

  • src/pbcCode 和 src/pbc 所有文件夹和子文件夹一一对应，为 PBC 里所有表单和页面通过 Code Generator 操作过后生成的 JS 代码。

    例如，上面的 Defect 表单下的 Count 字段，对应的 JS 代码如图所示：

local-project-4

开发和构建项目​

备注

修改 webpack.config.js 文件中的 target: 'http://localhost:3002' 可以将后端服务 api 请求代理到你的后端服务地址，例如直接改成你导出项目的 try run 的地址 (不要 /ui 后缀)。

使用 pbc 目录下的 json 源码启动项目​

运行开发模式​

yarn start

构建项目​

yarn build

使用 pbcCode 目录下的 react jsx 源码启动项目​

运行开发模式​

yarn start:code

构建项目​

yarn build:code

其他命令请阅读项目根目录的 README.md 文件。

提示

yarn start 和 yarn start:code 命令的唯一区别是决定使用 src/pbc 目录的 json 源码还是使用 src/pbcCode 目录下对应的 js 组件 源码，其余目录不受影响，例如 src/component, src/hooks 等。 换而言之，平台配置的所有表单和页面，只在 src/pbc 目录和其对应的 src/pbcCode 下。