前端工程产品、项目all in one 规范

工程改造

一、新建std模块

将原标准产品工程代码，移到该文件夹

pai-finance-ui                工程根目录
├─pai-project                 应用启动配置
├─project                     客制化根目录
│  ├─hf                       客制化项目模块
│  └─hngh                     客制化项目模块
└─std                         标准模块

二、新建project模块

里面按项目，区分文件夹，将代码移到对应项目

项目客制化功能：

• 项目代码，新建 [project] 文件夹下，新建 [项目A] 文件夹，根据 [std] 目录层级：新增、修改文件
• 与 [std] 内代码一样的，不需建在项目下

三、引入 @flyriselink/pai-project 插件

具体安装说明及使用：

https://www.npmjs.com/package/@flyriselink/pai-project

配置初始化

根目录下新建文件 pai-project/index.js

const PaiProject = require('@flyriselink/pai-project')

PaiProject({
  process: process,
  // log: false,
})

更改 package.json

{
  "scripts": {
    "p-i": "cross-env MODE=install node pai-project/index",
    "p-install": "cross-env MODE=install node pai-project/index",
    "dev": "cross-env MODE=dev node pai-project/index",
    "build": "cross-env MODE=build node pai-project/index",
    "prod": "cross-env MODE=prod node pai-project/index",
    "compare": "cross-env MODE=prod node pai-project/compare"
  },
  "dependencies": {
    "cross-env": "7.0.3",
    "@flyriselink/pai-project": "^1.2.0"
  },
}
// 以上为：安装项目依赖、启动项目、编译项目

四、忽略文件提交

编辑 .gitignore 文件，忽略 [application] 文件夹内容提交

五、本地运行

// 1.安装依赖
$ npm i

// 2.安装项目依赖（标准版）
$ npm run p-i
或者（安装某项目依赖）
$ npm run p-i hngh(项目文件夹名称)

// 3.运行项目（标准版）
$ npm run dev
或者（运行某项目）
$ npm run dev hngh(项目文件夹名称)

• 项目启动：最终以 [application] 文件夹下代码进行：运行/编译

六、更改 Dockerfile 部署配置

原配置

ARG NODE_ENV=test
RUN npm install
RUN npm run build:$NODE_ENV

COPY –from=builder /build/pai-hello-ui/dist/ /usr/share/nginx/html/hello/

调整配置

ARG NODE_ENV=test
RUN npm install
RUN npm run p-install -P $NODE_ENV
RUN npm run build -P $NODE_ENV

COPY --from=builder /build/pai-hello-ui/application/dist/ /usr/share/nginx/html/hello/

• 增加了 p-install
• 增加了 -P $NODE_ENV
• COPY 增加了 /application 路径

七、发布

1.部署标准版

pai image publish -n pai-hello-ui -b dev-2.0.0.0

2.部署项目

pai image publish -n pai-hello-ui -b dev-2.0.0.0 -P hngh(项目文件夹名称)

pai-project 插件

介绍

https://www.npmjs.com/package/@flyriselink/pai-project

扩展功能 文件夹差异对比

• 快速删除项目中相同的文件

1. 初始配置

1. 根目录下新建文件 pai-project/compare.js

const PaiProject = require('@flyriselink/pai-project')

PaiProject({
  process: process,
  // log: false,
  isCompare: true,
})

2. 更改 package.json

{
  "scripts": {
    "compare": "cross-env MODE=build node pai-project/compare",
    ...
  }
}

2. 进行对比、删除文件

$ npm run compare hngh(项目文件夹名称)