2022 年工作记录

1. 脚手架

1.1 重构

一般自定义的脚手架都有一个统一的 xxx.config.js 来配置自己的组件库和一些打包什么的配置。

重构前的前端脚手架，通过编写一个 xxx-cli-service 代理 vue cli-service，添加启动参数 js入口到 entry.js import config.js 和 main.js 的方式来添加全局配置 js。

修改方案：添加了 babel-xxx-config-plugin，通过 ast 动态添加 import config config.js 到 main.js 中

1.2 动态资源路径、路由路径

一般前端项目都使用 webpack 打包，publicPath 都是固定配置 xxxx，部署到 nginx 上，如下

    location /xxxx {
      alias  /data/home/xxxx/;
      # history 模式配置
      try_files $uri $uri/ @router-xxxx;
    }

xxxx 的部署路径不是固定的，如果生产上路径需要变化，那么需要修改配置，然后重新构建前端项目。

因为一个部署路径的修改，就要动到构建配置。其中还需要和开发、运维沟通，太麻烦了。

查看 webpack 的文档，发现 publicPath 是可以在 runtime 上来指定的。通过在 entry.js 中 import 'public-path', myRuntimePublicPath 是可以在 index.html 中进行赋值

// public-path.js
__webpack_public_path__ = window.myRuntimePublicPath?window.myRuntimePublicPath:'xxxx'

这块只是修改了资源文件的路径，路由路径默认是 process.env.BASE_URL 和 publicPath 是一致的。所以还需要将路由路径动态化

// router.js
const router = new VueRouter({
  mode: 'history',
  // 多添加一个 myRuntimeRouterPath
  base: window.myRuntimeRouterPath?window.myRuntimeRouterPath?:process.env.BASE_URL,
  routes: []
})

目前上方的代码还是手动来修改的，为了让公司的小伙伴用的更简单。编写插件 babel-dynamic-public-path-plugin ，只要在 vue.config.js 中添加 dyanmicPath: true | false 就可以轻松实现 publicPath 动态化。

具体插件实现，有需要的扣 1

1.3 脚手架基于 k8s 的 devops 脚本和插件编写

公司没啥运维。只能开发上了，需求如下：

指定 node 版本的编译
通过配置 k8s 参数，动态修改请求 api 路径

1.3.1 指定 node 版本

在 k8s jennkinsfile 中添加如下配置，其中 image 配置的就是 node 版本

agent {
    kubernetes {
      inheritFrom 'nodejs base'
      containerTemplate {
        name 'nodejs'
        image 'node:14.19.0'
      }
    }
  }

坑点：最后的 docker 镜像构建的位置 container('nodejs') 不能指定容器为 nodejs ，记得修改为 container('base')

1.3.2 根据 k8s 参数，动态修改请求 api 路径

目前 k8s 上前端使用的是 nginx 部署，所以只需要动态修改 nginx 的配置文件即可。如何让 nginx 的配置根据参数构建来动态化，试了好几种方案，发现要么麻烦，要么配置复杂，索性自己来生成 nginx.config 文件。

实现方案如下：

1. 编写 nginx.template.js nginx.conf.hbs
1. 读取 k8s 构建参数变量，通过编译 nginx.config.hbs 的方式来动态生成 nginx.conf 文件

node nginx.template.js API_PATH=$API_PATH SERVER_ADDRESS=$SERVER_ADDRESS

nginx.conf.hbs

upstream my_server{
  # 后端server 地址
  server {{SERVER_ADDRESS}}; 
  keepalive 2000;
}

server {
  #header 字段允许使用下划线
  underscores_in_headers on;

  listen       80;
  server_name  localhost; # 修改为docker服务宿主机的ip/域名

  #charset koi8-r;
  access_log  /var/log/nginx/host.access.log  main;
  error_log  /var/log/nginx/error.log  error;

  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ @router;
  } 

  #重点配置
  location @router {
      rewrite ^.*$ /index.html last;
  }

  location /{{API_PATH}} {
      proxy_pass http://my_server;
      proxy_set_header Host $host:$server_port;
  }

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   html;
  }  
}

2. cli 功能添加

cli 支持创建前端（pc、mobile）和后端（java）项目，脚手架存储在 gitlab 仓库上。

cli 添加的功能：

支持命令启动代码生成器，连接数据库，根据选择的字段动态生成前后端代码
支持在 gitlab 动态配置 json 文件，更新脚手架列表

坑：后端项目中的代码大部分都是需要动态替换的，所以集成了 handlebars，为啥用 hbs~因为用过。其实 ejs 会更好

因为变量太多，不好整理，所以需要扫描脚手架模板中的所有变量进行列表显示，好让编写模板的人员进行变量整理和替换

目前脚手架还是比较难用，没办法选择脚手架版本

3. fusion design vue

因为项目需要（一个项目被阿里投中了，外包给我们公司了，需要 fusion design 的样式，目前只有 react 版本的）和组里的小伙伴改造了基于 ant-design-vue@1.7.8 的 fusion design。

改造过程，从 fusion design scss 样式代码先转成 less，然后依次替换 antv 中的变量。

坑：scss 转 less 的过程还是很艰辛，目前市面上没啥能完美转换的，所以只能转换一些简单的，剩下的还是给靠人工修改。

样式其实也只是修改了一部分，看起来大体结构一样~具体的 UI 操作逻辑还是不同的

4. 打印平台

前端的打印场景还是很多的，将一些单据或者一些业务数据通过打印机打印出来。每个项目的打印的模板需求都是不同的，来一个需求可能就要重新写一个需要打印的页面。而且大部分根据页面渲染成 image 或者 pdf 都有一堆细节问题，靠现有的插件都不能完美的做到 1:1 打印到纸张上。而且还有控制打印机进行批量打印的需求，涉及到桌面客户端。

实现思路，通过拖拉元素：文字、图片、二维码、分割线、表格等元素到画布上，通过这些元素的组合，然后在元素上输入变量表达式，动态生成 pdf。生成 pdf 后通过 websocket 传输到桌面客户端，客户端通过操控打印机进行打印。

界面抄的可画、稿定 - -

后续会出一个拖拉拽生成 pdf 文件的专题。

前端脚手架、devops、打印等 ---2022 年工作记录